From React Hooks in Action by John Larsen

If you’re building React apps, then you’re expecting the data your app uses to change over time. Whether it’s fully server-rendered, a mobile app or all in a browser, your application’s user interface should represent the current data or state at the time of rendering. Sometimes multiple components throughout the app will use the data, and sometimes a component doesn’t need to share its secrets and can manage its own state without the help of mammoth, application-wide state-store behemoths. In this article, we’ll keep it personal and concentrate on components taking care of themselves, without regard for other components around them.

From React Hooks in Action by John Larsen

Some of our React components are super-friendly, reaching out to say “hi” to APIs and services outside of React. Although they’re eternally optimistic and like to think the best of all those they meet, there are some safeguards to be followed. In this article, we’ll look at setting up side effects in ways that won’t get out of hand. In particular, we’ll explore these four scenarios:

§ Running side effects after every render

§ Running an effect only when a component mounts

§ Cleaning up side effects by returning a function

§ Controlling when an effect runs by specifying dependencies

To focus on the API we’ll create some easy component examples. First up, let’s say “Bonjour, les side-effects.”