Thread by @housecor

🚨 React developers: 🚨

You don’t have to fetch data via useEffect.

Here are 7 compelling alternatives to fetching data via useEffect:

1. react-query
2. swr
3. XState
4. React Router 6.4
5. @remix_run loader
6. @nextjs getServerSideProps/getStaticProps
7. rtk query

#react

And yes, many of these use useEffect behind the scenes. But that’s the point - instead of calling useEffect directly, you should probably use a mature abstraction at this point.

Here’s why.

https://twitter.com/housecor/status/1437765709849927684

My decision tree:

Using @remix_run? Fetch in loader.

Using @nextjs? Fetch in getServerSideProps/getStaticProps and via swr on client.

Using React Router 6.4? Fetch in the route’s loader prop.

Using Redux? Fetch via rtk query.

Nothing above applies? Use react-query.

Two clarifications:

1. React Router 6.4 isn't here yet, but it adds data support via a new loader prop and looks 🔥: beta.reactrouter.com/en/dev/getting…

2. I plan to continue using react-query with React Router 6.4, so I can enjoy react-query's unique benefits like caching.