React.js stateless vs stateful

React JS Javascript Library Front End Technology

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.

Shyam Hande

Updated on 04-Sep-2019 14:49:37

Previous Page Print Page Next Page