Prevent useCallback rerendering children components

App.jsx

import React, { useState, useRef, useCallback } from "react";
import Button from "./Button";

function App() {
  const [state, setState] = useState("");
  const ref = useRef(state);
  const handleChange = useCallback(event => {
    ref.current = event.target.value;
    setState(event.target.value);
  }, []);
  const handleClick = useCallback(
    event => {
      event.preventDefault();
      alert(ref.current);
    },
    [ref]
  );
  return (
    <form onSubmit={handleClick}>
      <input onChange={handleChange} />
      <Button onClick={handleClick} />
    </form>
  );
}

export default App;

Button.jsx

import React, { useRef } from "react";

const Button = ({ onClick }) => {
  const counter = useRef(0);
  return <button onClick={onClick}>Click me {counter.current++}</button>;
};

export default React.memo(Button);

useMemoState.jsx

import { useRef, useState, useCallback } from "react";

function useMemoState(...args) {
  const [state, _setState] = useState(...args);
  const memoState = useRef(state);
  const setState = useCallback(
    nextState => {
      memoState.current = nextState;
      _setState(nextState);
    },
    [memoState]
  );
  return [memoState, setState];
}

export default useMemoState;