Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
React.js stateless vs stateful
Understand the difference in stateless and stateful react components
In state management post, we learned how we can handle state in react if something is changed.
- Stateless components are simple functional component without having a local state but remember there is a hook in react to add state behavior in functional component as well.
- Stateful component can contains the state object and event handling function, user actions as well.
- Stateless component are pure in nature which does a very specific task.
import React from 'react';
const player = (props) => {
return (
<div>
<p>I'm a Player: My name {props.name} and my score is
{props.score}</p>
{props.children}
</div>
);
}
export default player;Above is one such a functional component which only displays the props attribute passed from another component. We can call event handling functions from functional component which are located in class components (containers).
Containers means which contains some local state or event or user actions.
We can add some logical dynamic code in the functional component but no modification of state or applications data.
PASSING METHOD REFERENCE FROM FUNCTIONAL COMPONENT
In dynamic output post, we have seen how to pass attribute from parent component to child functional component. Similar to it, we can add a method reference.
import React, {Component} from 'react';
import './App.css';
import Player from './Player'
class App extends Component {
state = {
players:[
{name: 'Smith', score:100 },
{name: 'David', score:90},
{name: 'Phil', score:80}
],
otherObject:'Test'
}
switchPlayerHandler = () =>{
this.setState({players:[
{name: 'Smith', score:200},
{name: 'David', score:290},
{name: 'Phil', score:380}]});
}
render(){
return (
<div className="App">
<button onClick={this.switchPlayerHandler}>
Switch Player
</button>
<Player name={this.state.players[0].name}
score={this.state.players[0].score}
click={this.switchPlayerHandler}/>
<Player name={this.state.players[1].name}
score={this.state.players[1].score}
click={this.switchPlayerHandler}>
Plays for Australia
</Player>
<Player name={this.state.players[2].name}
score={this.state.players[2].score}
click={this.switchPlayerHandler}/>
</div>
);
}
}
export default App;Observe we passed a method ref
<Player name={this.state.players[2].name}
score={this.state.players[2].score}
click={this.switchPlayerHandler}/>We can use it on the functional component similar to onClick function call
import React from 'react';
const player = (props) => {
return (
<div>
<p onClick={props.click}>I'm a Player: My name {props.name} and my score is {props.score} </p>
{props.children}
</div>
);
}
export default player;PASSING ARGUMENT TO METHOD REFERENCE IN FUNCTIONAL COMPONENT
<button onClick={this.switchPlayerHandler.bind(this,'John','Test')}>
Switch Player
</button>With above syntax, we can pass this as first argument for class binding and remaining argument are the value that we want to pass.
switchPlayerHandler = (newName,secondName) =>{
this.setState({players:[
{name: newName, score:200},
{name: secondName, score:290},
{name: 'Phil', score:380}
]});
}The passed values can be used in function as shown above.
There is an another alternate approach to pass method parameters.
onClick={ () => this.switchPlayerHandler('Michel','Stark') }The above is an anonymous function call. It works the same. This approach is not efficient as compare with first approach because React does some rendering with the second anonymous function call. It depends if we don’t consider performance hit.
State or application data modifications should be done in a few selected components to avoid complexity.
4K+ Views
