Reactjs – Child components not restarting one state change of of Parent Component

In React, when the key prop of the Component changes, It unmounts the old Component and mounts a new one.

I have used clicked state in the parent component and passed it in the dependency array of useEffect hook, whenever you press the click button, clicked state changes, the Parent component will re-render and useEffect toggles the state of key that leads to mount ChildComponent as fresh.

You can use as many states in the parent component, and all states in the dependency array of useEffect hook.

useEffect(() => {
    setKey((prev) => !prev);
  }, [state1,state2,state,.....]);

Parent Component

import { useEffect, useState } from "react";
import "./styles.css";
import { ChildComponent } from "./ChildComponent";
export default function App() {
  const [clicked, setClicked] = useState(false);
  const [key, setKey] = useState(false);
  useEffect(() => {
    setKey((prev) => !prev);
  }, [clicked]);

  const handleButtonClick = () => {
    setClicked((prev) => !prev);
  };
  return (
    <div className="App">
      <button onClick={handleButtonClick}>click</button>
      <h3>clicked: {clicked ? "Yes" : "No"}</h3>
      <br />
      <ChildComponent key={key} />
    </div>
  );
}

Child Component

import React, { useState } from "react";

export const ChildComponent = () => {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);

  const combinednum = `${num1 + num2}`;

  const handleOnAddClick = (value) => {
    if (value === 1) {
      setNum1((prevNum1) => prevNum1 + 1);
    } else if (value === 2) {
      setNum2((prevNum2) => prevNum2 + 2);
    }
  };
  return (
    <div>
      <p>num 1: {num1}</p>
      <button onClick={() => handleOnAddClick(1)}>Add 1</button>
      <p>num 2: {num2}</p>
      <button onClick={() => handleOnAddClick(2)}>Add 2</button>

      <p>Combined num: {combinednum}</p>
    </div>
  );
};

If you wanna play around with code