blog9.md

blog9.md

function useFunctionHook(fn, ref) {
  
  React.useEffect(
    () => {
            fn();
    },
    [fn]
  );
  React.useEffect(() => {
    // some trivial update happening to 
    if(ref.current) {
        ref.current.style.backgroundColor = "hotpink"
    }
    
  }, [ref])
}


function fnCallback() {
    console.log("Hi bro");
}

function App() {
  const ref = React.useRef(null)
  
  const [countInParent, setCountInParent] = React.useState(0);
  
  const fn = React.useCallback(fnCallback, [])

  useFunctionHook(fn, ref);

  return (
    <div ref={ref}>
      {countInParent}
      <button onClick={() => setCountInParent(c => c + 1)}>
        Increment Parent's count
      </button>
    </div>
  );
}