Skip to content

Instantly share code, notes, and snippets.

@simbathesailor
Created December 25, 2019 16:02
Show Gist options
  • Save simbathesailor/01719b76788388c239c5a7082d8a7315 to your computer and use it in GitHub Desktop.
Save simbathesailor/01719b76788388c239c5a7082d8a7315 to your computer and use it in GitHub Desktop.
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>
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment