score:0

every time app renders, it generates a new handleclick function and passes it as a prop to <buttondiv>.

the usememo hook lists handleclick in the dependencies.

since handleclick has changed, the memoized function has to be called to regenerate the result.


you probably want to wrap the creation of handleclick in usecallback.

score:0

you are sending a new reference of handleclick every time that you are rendering the app

with some modifications and using usecallback you can make it work without re-rendering the divbuttons, usecallback without deps will generate always the same instance so it won't be refreshing your buttons.

had to remove the items state, since if you add it you will have always the instance of the state at the moment the handleclick is created, so using just the set state and the prevstate we can manage to make it work

  const handleclick = usecallback(
    (number) => {
      console.log("typeof", typeof number, number);
        setitems((prevstate) =>
            prevstate.includes(number) ? 
              prevstate.filter((prevslot) => prevslot != number) :
              [...prevstate, number]
          )
    },
    []
  );

adding image of working example.

enter image description here


Related Query

More Query from same tag