Guidelines For Updating State When Props Change In React

Are you looking for the answer to the question How to Updating State When Props Change In React? I’ll show you how. Check out the full article below.

Updating State When Props Change In React

From version 16.8 onwards, React released React Hooks. The useEffect is a hook in React that allows users to manage side-effects within a function component. In this article, I will show you how two use them to update the state of components when props change.

Syntax:

useEffect(effectFunction,[dependencies]);
//effectFunction: run the effect
//[dependencies]: when the value in this array changes, the effectFunction will be executed. It is an optional parameter

Example of using the useEffect hook

Look at the example program I provide below, and then I will explain to you its working logic.

Here is my project’s structure:

In ParentCountClicks.js:

import {useState} from 'react';
import CountClicks from './CountClicks';

export default function ParentCountClicks () {
    const [NumberOfCount, setNumberOfCount] = useState(0);
  
    return (
      <div>

        <button className="btn btn-primary" onClick={() =>  setNumberOfCount(currentState => currentState + 1)}>
          Click here | <b>{NumberOfCount}</b>
        </button> 
  
        <CountClicks  NumberOfCount={NumberOfCount} />
      </div>
    );
}

In CountClicks.js:

import {useEffect, useState} from 'react';

export default function CountClicks({NumberOfCount}) {
    const [countClicks, setcountClicks] = useState(0);
  
    useEffect(() => {
      setcountClicks(NumberOfCount);
    }, [NumberOfCount]);
  
    return (
      <div>
          {countClicks !== 0 ? (
            <p>You have clicked {countClicks} times</p>
          ): <p>You haven't clicked yet</p>}
      </div>
    );
}

The ParentCountClicks here plays the role of the parent component, and the CountClicks is a child component. Data is transferred from ParentCountClicks to CountClicks via props. 

Specifically, in this example, we declare a state variable in ParentCountClicks using the useState hook – its name NumberOfCount and the value is initialized to 0. The variable NumberOfCount is then passed to the component CountClicks using props. 

 <CountClicks  NumberOfCount={NumberOfCount} />

In CountClicks, we also use the useState hook to create a state variable called countClicks and the useEffect hook that takes two parameters, one is a setcountClicks function, and a prop is passed from ParentCountClicks as a dependency – is the variable NumberOfCount just mentioned above.

useEffect(() => {
      setcountClicks(NumberOfCount);
    }, [NumberOfCount]); 

The purpose of using useEffect is that every time we click on the “Click me” button, the value of NumberOfCount will be changed, then the setCountClicks function will be executed, then the state of the component CountClicks will be updated.

In App.js:

import './App.css';
import ParentCountClicks from './components/ParentCountClicks';

export default function App() {
  return (
    <div className="App">
     <ParentCountClicks />
   </div>
 );
}

When running this application, the state of the component changes after every time you click the button:

That’s how we update the component’s state when the props change.

Summary

This tutorial showed you the instruction for Updating State When Props Change In React. These will be essential knowledge when you work with React.

Maybe you are interested:

• Concatenate strings and variables in react
• Get the current URL and Pathname in React
• How to toggle a Boolean state in React

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js