named function and arrow function in event handler in react

Question

What's wrong with the code below?

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h2>{count}</h2>
      <button
        onClick={() => {
          setCount((count) => count + 1);
        }}
      >
        increase
      </button>
    </div>
  );
}

will using the arrow function in the event handler cause rerendering and affect performances?

Someone argued I should do this instead.

const [count, setCount] = useState(0);
  const increment = () => setCount((count) => count + 1);

  return (
    <div className="App">
      <h2>{count}</h2>
      <button onClick={increment}>increase</button>
    </div>
  );

To me it's just a matter of preference, it doesn't improve performance, am I right?

https://codesandbox.io/s/purple-breeze-8xuxnp?file=/src/App.js:393-618

If you really want to avoid redeclaring the function you could useCallback but no, given a single instance the two are the same — both redeclare a single function on each render. — pilchard
– pilchard, Commented Jan 27, 2023 at 1:13

saguirrews · Accepted Answer · 2023-01-27 01:08:16Z

1

React triggers a re-render when state changes, parent (or children) re-renders, context changes, and hooks changes. So in your example above, there's no difference to re-renders whether you extract the function or just simply type it in the html.

answered Jan 27, 2023 at 1:08

saguirrews

3301 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

named function and arrow function in event handler in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related