React Component Re-render

Question

What happens to a function when a component re-renders in react? Is it recreated everytime?

export default function App() {
  console.log("rendered");
  const [isOpen, setisOpen] = useState(false);
  function handleClick() {
    setisOpen(true);
  }
  return (
    <div className="App">
      <button onClick={handleClick}>Click</button>
      {isOpen && <div>Secret is opened.</div>}
    </div>
  );
}

Why does this component renders 3 times?

Does this answer your question? stackoverflow.com/questions/57289811/… — Lin Du
– Lin Du, Commented Jan 14, 2022 at 3:10

Anku Singh · Accepted Answer · 2022-01-14 05:35:57Z

0

On every render of the parent function it's child function gets created in order to prevent this you can use react hook called useCallBack

    import React, { useCallback } from 'react'
    export default function App() {
       console.log("rendered");
       const [isOpen, setisOpen] = useState(false);
       const handleClick = useCallback(() => {
         setisOpen(true);
       }, []);

      return (
        <div className="App">
          <button onClick={handleClick}>Click</button>
          {isOpen && <div>Secret is opened.</div>}
        </div>
      );
    }

here [] means this child function will be created once when parent function rendered

answered Jan 14, 2022 at 5:35

Anku Singh

9546 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Karunesh Tripathi Over a year ago

Hey Anku. Thanks for the response. I don't see the use of Callback here. Even if we do that, we are still getting 3 renders.

Anku Singh Over a year ago

If you are calling this App component in some other component as child component then you need to use React.memo() hook to prevent re rendering re rendering will only occur when any props passed to this App component will change read this article you will get the idea dmitripavlutin.com/use-react-memo-wisely

Collectives™ on Stack Overflow

React Component Re-render

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related