fix(useSetState): memoize setState callback

[TylerR909]

Addresses #555

Wraps the callback from useSetState in useCallback to memoize it so that folks following the Best Practices from the React FAQ with the react-hooks/exhaustive-deps rule enabled don't trigger endless rerenders in a useEffect(() => {}, [setState]); where setState is constantly changing out from under them.

I tried to write a couple tests for this but I'm not really sure what angle to approach it from or how to layer everything together to test for something useful.

Problematic code fixed by this PR:

const myComponent = () => {
  const [{ loading, data }, setState] = useSetState({ loading: true, data: null });

  useEffect(() => {
    console.log('hi');
    // fetch data
    setState({ loading: false, data: 'data!' });
  }, [setState])

  return null;
}

[Belco90]

Ey, thanks for your fix! Testing this should be easy: at the end you need to check if the returned setState fn is always the same instance, so you can add an additional test to useSetState.test.ts like 'should return always same setter instance' where:

1. render the hook and save its returned setState in a const
2. rerender the hook and save new returned setState in a new const
3. compare two saved setState are the same with jest matcher toBe as expect(Object.is(received, expected)).toBe(true)

It should fail with the previous code and pass with your new fix. You can find an example about how rerender a hook within usePrevious.test.ts file.

[Belco90]

Add commented test for checking function instance is always the same

[TylerR909]

👍

Added a test to do just that. Validated that it broke with the old code and passes with the new code.

Hope it meets with your approval. Thanks!

[streamich]

Thanks!

[streamich]

🎉 This PR is included in version 11.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀