如何从工厂 function 返回 React 记忆回调

Question

I am wondering how best to return a memoized callback function in React when using a factory to generate that callback. The goal is to return the same function instance when the factory is called with the same parameter.

For example:

function MyComponent() {
    // This will always return a new function
    const makeCallback = param => () => {
        /* perform action with 'param' */
    };

    return (
        <>
            <Button onClick={makeCallback('foo')} />
            <Button onClick={makeCallback('bar')} />
            <Button onClick={makeCallback('baz')} />
        </>
    );

I don't believe wrapping the factory itself with a useCallback would provide any benefit, since that function is not actually being passed to any of the children, so my idea was to return a useCallback function from the factory.

Like this:

const makeCallback = param => React.useCallback(
    () => {
        /* perform action with 'param' */
    },
    [param]
);

However, that was not allowed and failed at build time.

React Hook "React.useCallback" is called in function "makeCallback" which is neither a React function component or a custom React Hook function - react-hooks/rules-of-hooks

The "Rules of Hooks" say clearly that calling a hook in a nested function is not permitted, but this seems odd to me since a custom hook is often literally just a function that calls other hooks. It says the primary concern is preserving the order of execution, but I don't think that would be violated in this case.

Is my best option to turn my factory into a hook and call it explicitly at the top level for each case? I'd prefer the simplicity of building the callback in the button itself, since it's a little less typing and the param piece is more apparent and obvious when kept with the button.

// Same factory function, but now it's magically a "hook"
const useCallbackFactory = param => {
    return React.useCallback(() => { /* do 'param' stuff */ }, [param]);
}

function MyComponent() {
    // Define the callbacks ahead of time
    const fooCb = useCallbackFactory('foo');
    const barCb = useCallbackFactory('bar');
    const bazCb = useCallbackFactory('baz');

    return (
        <>
            <Button onClick={fooCb} />
            <Button onClick={barCb} />
            <Button onClick={bazCb} />
        </>
    );
}

Answer 1

The goal is to return the same function instance when the factory is called with the same parameter.

I think what you want is something like this:

 let memoizedcb = React.useCallback(
    memoize((fieldName) => (val) => doSomething(fieldName, val)),
    []
  );

where

import memoize from "fast-memoize";

Now function returned by memoizedcb will be same across renders for the same argument.

Now you can use it like

<TextField onChange={memoizedcb("name")} value={name}/>
<TextField onChange={memoizedcb("surname")} value={surname}}/>

Answer 2

One possible way of doing so is by creating a custom hook: (Don't take this example too seriously, just to make a point).

const useFactory = (type) => {
    let f;
    if (type === 'a') {
    f = () => console.log('hello world');
  } else {
    f = () => console.log('bye world');
  }

  return React.useCallback(f, [type]);
};

const Button = React.memo(({ onClick, children }) => {
    console.log('re render');
    return <button onClick={onClick}>{children}</button>;
});

const App = () => {
  const f1 = useFactory('a');
  const f2 = useFactory('b');

  return (
    <div>
      <Button onClick={f1}>F1</Button>
      <Button onClick={f2}>F1</Button>
    </div>  
  );

};

https://jsfiddle.net/kadoshms/740zkeso/9/

Answer 3

I think you are close with useCallback but you really just want to memoize the result of the factory. The useMemo hook can do that.

const callback = useMemo(() => {
  return callbackFactory(param);
}, [param]);

The hook won't recompute its return value (ie callback) unless the param in the dependency array changes.

Demo

const callbackFactory = param => {
  console.log("invoked callback factory!!");
  switch (param) {
    case "a":
      return () => console.log("callback A");

    case "b":
      return () => console.log("callback B");

    default:
      return () => {};
  }
};

export default function App() {
  const [param, setParam] = useState("a");
  const [, setCount] = useState(0);

const callback = useMemo(() => {
  return callbackFactory(param);
}, [param]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <select defaultValue="a" onChange={e => setParam(e.target.value)}>
        {["a", "b"].map(param => (
          <option key={param} value={param}>
            {param}
          </option>
        ))}
      </select>

      <button type="button" onClick={callback}>
        Press Me
      </button>
      <button type="button" onClick={() => setCount(c => c + 1)}>
        Rerender!
      </button>
    </div>
  );
}

Answer 4

If the callbacks should remain the same between different "instances" of the component and remounts of the component it may make sense to declare them in advance out of the scope of the component.

const cb1 = params => { ... };
const cb2 = params => { ... };

const App = () => (
  <div>
    <Button onClick={cb1}>F1</Button>
    <Button onClick={cb2}>F2</Button>
  </div>  
);

This is not very handy, so it may make sense to memoize the results factory returns and reuse it.

 const makeMemoizedCallback = factory => { let cache = {}; return (...args) => { const key = JSON.stringify(args); if (.(key in cache)) { cache[key] = factory(..;args); } return cache[key]; }; }. const makeCallback = makeMemoizedCallback(param => runtime => { console,log(param; runtime); }). console;log(makeCallback("a") === makeCallback("a")); makeCallback("a")(1); makeCallback("b")(2);

Usage:

const makeButtonClickHandler = makeMemoizedCallback(param => e => {
  console.log(param, e);
});

const App = () => (
  <div>
    <Button onClick={makeButtonClickHandler("F1")}>F1</Button>
    <Button onClick={makeButtonClickHandler("F2")}>F1</Button>
  </div>
);

Answer 5

This is very unfortunate, but react doesn't support something like this. The best way I found would be to reuse the same memoized callback and use name as the id, as follows (modifying your code snippet):

function MyComponent() {

    const callback = useCallback(e => {
        const param = e.target.name
        /* perform action with 'param' */
    }, []);

    return (
        <>
            <Button name='foo' onClick={callback} />
            <Button name='bar' onClick={callback} />
            <Button name='bar' onClick={callback} />
        </>
    );
}

Likewise in complex scenarios, you can pass some sort of id in the child where the child can pass it back in the callback:

function Parent() {
    const callback = useCallback((e, param) => {
        /* perform action with 'param' */
    }, []);
    return <>
        <Child id='foo' onChange={callback} />
        <Child id='bar' onChange={callback} />
        <Child id='baz' onChange={callback} />
    </>
}

const Child = memo(({id, onChange}) => {
    return <MyComponent onChange={e => onChange(e, id)} />
})

Although at its face you seem to create a new function in the child, the (memoized) child itself will not re-render on each parent render.