how to write onClick (with arguments) optimized by useCallback in React?

Question

I need to implement a long list, each item in the long list will trigger a new function when onClick, because this function is unchanged every time it is rendered, so I want to use useCallback to optimize it, this returned function Fn needs to pass in parameters, so should I use bind to pass parameters in onClick?

    const func = useCallback((num) => setIndex(num), [])
    // myComponent
    <TableItem onClick = { func.bind(null, index) } />

This is my first question, please forgive me if something is wrong，Thanks.

score 3 · Accepted Answer · answered Jul 17 '20 at 14:50

If you pass a callback to multiple components then you can use useCallback in the following way:

//make Counter a pure component (only re renders if something changed)
const Counter = React.memo(function Counter({
  counter,
  up,
  index,
}) {
  // ok to do onClick={new=>'function'} because we do not pass
  // onClick to sub components unless counter changes
  console.log('rendering index:', index);
  return (
    <button onClick={() => up(index)}>{counter}</button>
  );
});
const App = () => {
  //fixed amount of items that does not re order so can use index
  //  in key, do not use index as key when you don't have fixed
  //  amount of items or re order the list.
  const [counters, setCounters] = React.useState([0, 0]);
  const up = React.useCallback(
    (index) =>
      //pass callback to setCounters so counters is not
      //  a dependency of useCallback
      setCounters((counters) =>
        counters.map((counter, i) =>
          i === index ? counter + 1 : counter
        )
      ),
    []//empty dependency, only created when App mounts
  );
  return (
    <ul>
      {counters.map((counter, index) => (
        <Counter
          up={up}
          counter={counter}
          key={index}
          index={index}
        />
      ))}
    </ul>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

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

alfouz · Answer 2 · 2020-07-17T14:17:31.327

1

You need to set the second param in useCallback, this will prevent multiple renders.

i.e., if you want to set it just in when the component starts you can set

useCallback((num => setIndex(num)), [])

Note that [], it means it will only render at the beginning, if you want to update it when any variable changes, you can set [variablename, ...]

Also, I think you don't need the func.bind, you can set only

<Component onClick={func}/>

Edit: I misunderstood this question.

If you want to send a param in the onClick you can set it like this

const func = useCallback((num => setIndex(num)), [])
<Component onClick={()=>func(yourParam)}/>

With this way your onClick will always use the function, but it allows a param that you can set anywhere

edited Jul 17 '20 at 14:17

answered Jul 17 '20 at 14:12

alfouz

106
3

I know what you are talking about, I think you may have misunderstood what I meant, and I want to ask whether the way of passing parameters like onClick is reasonable and whether there is a more elegant way – user13948420 Jul 17 '20 at 14:14
my function func must need to incoming parameters – user13948420 Jul 17 '20 at 14:16
Yep, I misunderstood it, I have edited my answer, I think you only has to change the value with a param, creating an "outside function" – alfouz Jul 17 '20 at 14:19
1

If you use the arrow function, then each render will re-create a new function, then the optimization of useCallback is meaningless. Then the performance of the mobile terminal will be poor – user13948420 Jul 17 '20 at 14:35
3

If `onClick={()=>func(yourParam)}` is in the same component as `const func = useCallback((num => setIndex(num)), [])` it defeats the purpose of useCallback – HMR Jul 17 '20 at 14:43
I know how to solve it, I can achieve my purpose by storing the function in the object generated by useRef, thank you – user13948420 Jul 17 '20 at 14:56

how to write onClick (with arguments) optimized by useCallback in React?

2 Answers2