// 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
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?
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 rerenderhandleInvalid (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.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