How to return a React memoized callback from factory function

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} />
        </>
    );
}

gmoniava · Accepted Answer · 2020-04-28 15:47:59Z

3

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}}/>

edited Apr 28, 2020 at 15:47

answered Apr 28, 2020 at 7:05

gmoniava

28.9k9 gold badges61 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

J. Sheets Over a year ago

I didn't consider using a separate memoization library to handle the internals of the factory - maybe that is the compromise if the hooks are going cause trouble. I'm not very familiar with the internals of memoization, so do you know if there would be any gains/losses over using a different library besides React? Would you recommend this 'fast-memoize' over something like 'lodash'?

gmoniava Over a year ago

@J.Sheets I don't think there will be any losses, fast-memoize is pretty popular AFAIK. I've used this approach in my project.

Shlang · Accepted Answer · 2020-04-28 08:40:20Z

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>
);

Mordechai · Accepted Answer · 2020-09-24 20:39:43Z

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.

MorKadosh · Accepted Answer · 2020-04-28 06:52:56Z

0

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/

answered Apr 28, 2020 at 6:52

MorKadosh

6,0053 gold badges27 silver badges39 bronze badges

1 Comment

J. Sheets Over a year ago

This looks very similar to the last snippet in my question. I believe this would work for me, but I'd like to avoid that extra boilerplate if I can.

Drew Reese · Accepted Answer · 2020-04-28 07:09:43Z

0

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 (i.e. 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>
  );
}

answered Apr 28, 2020 at 7:09

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

2 Comments

J. Sheets Over a year ago

Unfortunately I think this would still require pre-defining the params for the factory, which you've done via the 'select' element in your example. I like this example, though, for cases where you'd be "constructing" the callback through the UI.

Drew Reese Over a year ago

@J.Sheets The select was only added to attempt to show/simulate when the param to the factory updates that the memoization works. You can see when the "rerender" button is clicked and the component rerenders that the factory isn't invoked again. Perhaps it'd be clearer if I'd moved all that outside App, or perhaps you are correct and I've overlooked an aspect.

Collectives™ on Stack Overflow

How to return a React memoized callback from factory function

5 Answers 5

2 Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related