Why does react/javascript recreates a function instance every time we call it?

Question

For example, onChange function:

const MyComponent = () => {
  const onChange = (e) => {
    doSomething(e.target.value)
  }

  return <input onChange={onChange} />
};

gets recreated on every change. Why is that, why can not the function keep the original reference?

You can maintain a single function instance with the useCallback hook — Bas
– Bas, Commented May 5, 2022 at 22:10
That's just how closures (functions defined inside functions) work. Why react chose to use this style is not known. — Bergi
– Bergi, Commented May 5, 2022 at 23:04

Bergi · Accepted Answer · 2022-05-05 23:04:39Z

3

React function components are just functions that run every render cycle and return JSX. So every render there's a completely different onChange constant that holds a different reference to the function(even though the behavior is the same).

If you want to keep the reference between renders, you should use React.useCallback. You can find more about it in React docs: https://reactjs.org/docs/hooks-reference.html#usecallback

edited May 5, 2022 at 23:04

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered May 5, 2022 at 22:24

Alex Khismatulin

5172 silver badges5 bronze badges

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

1 Comment

Bergi Over a year ago

The syntax used for useCallback calls still re-creates the function object every time, it just doesn't return the new function from useCallback when the memoisation dependencies didn't change.

Collectives™ on Stack Overflow

Why does react/javascript recreates a function instance every time we call it?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related