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?

Answer 1

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