CODEWITHSUNDEEP
javascriptreactjsrenderingrender
Dorjd
Dorjd

Reputation: 25

react parent component re-rendering again after all components have been rendered

Here's my code

// App.js
import { useState } from "react";
import Child from "./Child";

export default function App() {
  const [value, setValue] = useState(0);
  const [isInvalid, setIsInvalid] = useState(false);

  const handleChange = (e) => setValue(e.currentTarget.value);
  const handleInvalid = (isValue) => setIsInvalid(isValue);

  console.log("parent", isInvalid);

  return (
    <Child
      value={value}
      handleInvalid={handleInvalid}
      handleChange={handleChange}
    />
  );
}

//Child.js
import { useEffect } from "react";

export default function Child({ value, handleInvalid, handleChange }) {
  console.log("child");

  useEffect(() => {
    console.log("child effect");
    handleInvalid(!(Number(value) >= Number(0) && Number(value) <= Number(24)));
  }, [value, handleInvalid]);

  return (
    <input
      type="number"
      min={0}
      max={24}
      value={value}
      onChange={handleChange}
    />
  );
}

run => https://codesandbox.io/s/bumo-jasig-rendeoring-sunseo-isyu-forked-08gszy?from-embed

Problem

When the components are first rendered, they work as expected. like this:

parent false
child
child effect

However, if I change the input value, the result is like this:

parent false
child 
child effect 
parent false

As you can see, the parent component is rendered once more at the end. What is the problem and how do I fix it?

Upvotes: 1

Views: 86

Answers (2)

raina77ow
raina77ow

Reputation: 106385

Update your handleInvalid function to call the setter function only if value actually changed:

const handleInvalid = (isValue) => isValue !== isInvalid && setIsInvalid(isValue);

// or, lengthier
// const handleInvalid = (isValue) => { if (isValue !== isInvalid) setIsInvalid(isValue) };

Currently, each change of input in Child component fires two setters on Parent:

  • handleChange, which calls setValue(...), triggering the first Parent rerender
  • handleInvalid (as part of Child useEffect), which always calls setIsInvalid(...). It happens while Parent component is still not 'finalized' (that's the difference with initial render, when handleInvalid is called as well as part of Child "mounting"), hence render function for Parent is called twice.

Upvotes: 1

Hao.Le
Hao.Le

Reputation: 198

You declare states at Parent and pass them to Child via props.
so Parent will re-render whenever its states change
have no problem here

Upvotes: 0

Related Questions