Synchronizing with Effects

This is what I summarized while reading React docs.

React Effects are a powerful feature in React that allows you to synchronize your components with the outside world, like setting up a server connection or managing subscriptions. They differ from events because they handle side effects not directly tied to user actions.

Key Points about Effects:

• They run after every render, including the initial one.
• React skips Effects if the dependencies haven't changed.
• Cleanup functions run before the next Effect and when the component unmounts.

Writing an Effect involves three steps:

1. Declare the Effect: Use useEffect to delay code until after the render.
2. Specify Dependencies: Tell React when to skip the Effect to avoid unnecessary work.
3. Add Cleanup: If your Effect sets up a subscription or a timer, clean it up when it's no longer needed.

Common Pitfalls:

• Running an Effect after every render can cause infinite loops.
• Forgetting to specify dependencies or specifying the wrong ones can lead to bugs.

When to Use Effects:

• When you need to interact with the DOM after React updates it.
• When you need to set up a subscription or a timer.
• When you need to fetch data (but be cautious of potential downsides like network waterfalls).

Alternatives to Fetching Data in Effects:

• Server-side rendering, as Effects don’t run on the server.
• Preloading or caching data to avoid network delays.

Remember:

• React cleans up the previous Effect before running the next one.
• Each Effect is tied to the render it was declared in.