Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Step 2 - Convert SelectUsers component #6

wants to merge 14 commits into
base: 01-Filter


None yet
1 participant
Copy link

commented May 30, 2019

Here we needed to find a way to optimize our expensiveCalculationOnUsers so that it didn't run every time the component rendered, but it did update when the users prop changed.

The first and most simple way to do that is by using useMemo:

const calculatedUsers = useMemo(() => {
  if (users) {
    console.log('OMG this takes forever');
    return users;
  return [];
}, [users]);

However, we can't produce side effects inside of the useMemo function. So, if expensiveCalculationOnUsers relied on a fetch for instance, we would need to turn to useEffect once again.

The version of SelectUsers that is in this branch reflects this reality: we combine useState and useEffect to manage our expensive calculation, and by adding users to the useEffect dependency array, ensure that our component is always synced with the users prop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.