└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # useEffect - common use cases and alternatives [^1] [^2] 2 | 3 | | Use Case | Alternative | 4 | |-|-| 5 | | [Updating state based on props or state](https://beta.reactjs.org/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
[Caching expensive calculations](https://beta.reactjs.org/learn/you-might-not-need-an-effect#caching-expensive-calculations)
Transforming data | Compute on each render, consider a memo if expensive. | 6 | | [Resetting all state when a prop changes](https://beta.reactjs.org/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes) | Use key prop to reset state. | 7 | | [Adjusting some state when a prop changes](https://beta.reactjs.org/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes) | Compute on each render, consider a memo if expensive.
If unavoidable (e.g. new state depends on previous state or props) call setState directly during render. | 8 | | [Sharing logic between event handlers](https://beta.reactjs.org/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers) | Put the shared logic into a function that you call from both event handlers. | 9 | | [Sending a POST request](https://beta.reactjs.org/learn/you-might-not-need-an-effect#sending-a-post-request)
Responding to an event handler
Responding to user events | Use event handlers, or state transitions. | 10 | | [Chains of computations](https://beta.reactjs.org/learn/you-might-not-need-an-effect#chains-of-computations) | Calculate what you can during rendering, and adjust the state in the event handler. | 11 | | [Notifying parent components about state changes](https://beta.reactjs.org/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes)
[Passing data to the parent](https://beta.reactjs.org/learn/you-might-not-need-an-effect#passing-data-to-the-parent)
Communicating with parents | Move calls to parent props in to event handlers. | 12 | | [Subscribing to an external store](https://beta.reactjs.org/learn/you-might-not-need-an-effect#subscribing-to-an-external-store)
Interacting with browser APIs | useSyncExternalStore. | 13 | | [Fetching data](https://beta.reactjs.org/learn/you-might-not-need-an-effect#fetching-data) | react-query, react-router, apollo-client, [useLoaderData](https://remix.run/docs/en/main/hooks/use-loader-data), [getServerSideProps](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props), [RSC](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components), [SWR](https://swr.vercel.app), [use](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components), [react-async](https://github.com/async-library/react-async), [use-async-query](https://github.com/penx/use-async-query), [react-hooks-fetch](https://github.com/dai-shi/react-hooks-fetch). | 14 | | [Initializing the application](https://beta.reactjs.org/learn/you-might-not-need-an-effect#initializing-the-application)
Initializing global singletons | Call them outside of the component. | 15 | | [Synchronization Effects](https://beta.reactjs.org/learn/synchronizing-with-effects) ("Effects that are caused by rendering itself rather than by a particular event") | ✅ | 16 | 17 | [^1]: [You Might Not Need an Effect](https://beta.reactjs.org/learn/you-might-not-need-an-effect) 18 | [^2]: [Using useEffect Effectively](https://youtu.be/lrs8FNSUdkw?t=18990) by David Khourshid ([slides](https://slides.com/davidkhourshid/using-useeffect-effectively)) 19 | --------------------------------------------------------------------------------