How re-render a component without using setState() method in ReactJS ?
Last Updated :
13 Nov, 2023
In React, to re-render a class-based component with an updated state we generally use the setState() method. But instead, we can use other methods to re-render a component without using setState().
Prerequisites:
Approaches to re-render a component without using setState() method are.
Steps to Create React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure:
Method 1: by changing props
If we pass the state of the parent component as a prop to the child and call setState on the parent, it will cause the re-render of the child component as its props are changed.
Example: This code implements re-render by changing the props passed to the component.
Javascript
import React, { Component } from "react" ;
class App extends Component {
constructor(props) {
super (props);
this .state = { category: "Coder" };
this .updateState = this .updateState.bind( this );
}
updateState() {
this .setState({ category: "Geek" });
}
render() {
return (
<div>
<Child category={ this .state.category} />
<button onClick={ this .updateState}>
Click me!
</button>
</div>
);
}
}
class Child extends Component {
render() {
return (
<div>
<p>Hi { this .props.category}!</p>
</div>
);
}
}
export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
re-render of child component by changing props
Method 2: Using the forceUpdate() method
The forceUpdate method forcible re-render the component. When forceUpdate is called it directly calls the render method by skiping other lifecycle methods and update the interface.
Caution: Even though forceUpdate solves our problem but it is advised to use setState or changing props to re-render a component as forceUpdate method skips the proper lifecycle of rendering of a component. See this for detail.
Example: This example implements re-render forcibly using the forceUpdate method.
Javascript
import React, { Component } from "react" ;
class App extends Component {
reRender = () => {
this .forceUpdate();
};
render() {
return (
<div>
<h2>Random Number Generator</h2>
<p>
Your Number:{ " " }
{Math.floor(Math.random() * 10) + 1}
</p>
<button onClick={ this .reRender}>
Generate!
</button>
</div>
);
}
}
export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
generate a random number by forceUpdate method
Share your thoughts in the comments
Please Login to comment...