Memoize Elements

Loading "Memoize Elements"
πŸ‘¨β€πŸ’Ό Now we want our users to be able to type their name and have that show up in the footer. But we don't want to use context for the name like we do with the color just yet. We just want to be able to pass the name as a regular prop. But we still want to make sure that the Footer only rerenders when it should and no more. So you're going to need to combine useMemo with this React element optimization.
Remember that useMemo allows you to get the same value back if the dependencies haven't changed. Well, you can create a React element that depends on the name and render that:
const someElement = useMemo(() => <MyComponent myProp={myProp} />, [myProp])
Give that a shot! (Double-check your work with the React DevTools).

Please set the playground first

Loading "Memoize Elements"
Loading "Memoize Elements"

Access Denied

You must login or register for the workshop to view the diff.

Check out this video to see how the diff tab works.