blog12.md

blog12.md

function useFunctionHook(fn) {
  const [domElem, setElem] = useCallbackRef();

  React.useEffect(() => {
    // if (!(count % 2 === 0)) {
    // console.log(`I will call function }`);
    // debugger
    fn();

    // }
  }, [fn]);
  React.useEffect(() => {
    // we can so imperative logics with dom element
    if (domElem) {
      domElem.style.backgroundColor = "hotpink";
    }
  }, [domElem]);
  return [setElem];
}

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

function App() {
  const [countInParent, setCountInParent] = React.useState(0);

  const fn = React.useCallback(fnCallback, []);

  const [setElem] = useFunctionHook(fn);

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