Home>IT Tests>Questions>Find the issue with this React code:

Question from the React ⚛️ test

Find the issue with this React code:

Easy

const SomeComponent=({onChange, id})=>{
    const handleClick= useCallback(()=>{
        onChange(id);
  },[]);
 return <button onClick={()=>handleClick()}>Click me!</button>;
};

What are the issues with this code?

Author: Clément DEVOSStatus: PublishedQuestion passed 3867 times

Edit

Community Evaluations

Ihor Oherchuk

30/04/2024

Why is "You must absolutely encapsulate the onClick handler in a useCallback, otherwise performance will be impacted" the wrong answer? the button with onClick={()=>handleClick()} will rerender whenever the parent component does, even if handleClick is wrapped in useCallback, we need to write this way onClick={handleClick} to avoid extra rerenders and a negative impact for performance

Auteur anonyme

29/05/2024

I don t know too

Auteur anonyme

15/08/2024

useCallback is required only when performance is impacted, as this function itself adds extra work for each render. if onClick action does not impact performance, it should not be used.