useFunction

by Valentin Sarychev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root">
</div>

Babel + JSX

const Button = React.memo(({ onClick }) => {
    const count = React.useRef(0);
    count.current += 1;
    return (
      <div>
        <button onClick={onClick}>Button</button> rendered {count.current} times.
      </div>
    );
});

const App = () => {
    const [secs, setSecs] = React.useState(0);
    React.useEffect(() => {
        let time = 0;
        setInterval(() => setSecs(time++), 300);
    }, []);
    const onClick = useFunction(() => alert(secs));
    return (
        <Button onClick={onClick} />
    );
};

ReactDOM.render(<App />, document.querySelector('#root'));








function useFunction (fn) {
  const fnRef = React.useRef();
  fnRef.current = fn;

  return React.useCallback(function () {
    return fnRef.current.apply(this, arguments);
  }, []);
};