✳flâneur — a map of the web's best reading

Synchronizing with Effects – React

react.dev · 7,523 words · saved by 1 readers

Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Effects let you run some code after rendering so that you can synchronize your component with some system outside of React. Before getting to Effects, you need to be familiar with two types of logic inside React components: Rendering code (introduced in Describing the UI) lives at the top level of your component. This is where you take the props and state, transform them, and return the JSX you want to see on the screen. Rendering code must be pure. Like a math formula, it should only calculate the result, but not do anything else. Event handlers (introduced in Adding Interactivity) are nested functions inside your components that do things rather than just calculate them. An event handler might update an input field, submit an HTTP POST request to bu

Learn React Escape Hatches Copy page Copy Synchronizing with Effects Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Effects let you run some code after rendering so that you can synchronize your component with some system outside of React. You will learn What Effects are How Effects are different from events How to declare an Effect in your component How to skip re-running an Effect unnecessarily Why Effe

Explore this link on the map →

related reading