• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

129
Views
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?

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.
almost 3 years ago · Juan Pablo Isaza Report

0

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

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error