Conversation

total brain fart 🙃 thanks for flagging that!

Davo Galavotti

@pixelbeat

Glad to helping, sometimes we get caught up in the deets 😅 Really awesome article, Amelia! The comparison side by side with the visual markers provided great clarity. cc’ing

check this out

This is VERY cool. I especially love this. That's a major pitfall for people and I love that you're calling it out.

Great! At this point, you might be thinking: Got it, so useEffect() is just a new way to hook into lifecycle events! but that's the wrong way to look at it.

To drive it home a bit more, I'd add an example of a component that has two different things it's doing in componentDidMount/componentDidUpdate/componentWillUnmount and then separating those things into two separate useEffect calls to show that you can separate concerns too.

const dimensions = useMemo(getDimensions, [margins]) const xScale = useMemo(getXScale, [data]) const yScale = useMemo(getYScale, [data]) You could do probably just do this: const dimensions = getDimensions() const xScale = getXScale() const yScale = getYScale()

Unless those functions are computationally expensive. The idea behind useMemo isn't to keep state in sync, but to avoid recalculating things unnecessarily. :)

All that said, your website is amazing. I'm inspired 😮

🙏thanks for the thoughts & kind words! btw I have your testingjavascript.com page bookmarked as a design inspiration - I love how clean & focused it is, but still has fun details and a consistent design language