STOP 🛑

@mrllama25

47.0K followers · usually 9.1K views a post

Views

62.9K

Likes

3.0K

Comments

120

Shares

53

Selling · SaaS › Developer Tool

TanStack Query tanstack.com ↗

Why it worked

The video addresses a common pain point for React developers by highlighting inefficient data fetching patterns and offering a well-known, robust solution (TanStack Query) with clear code examples and explanations.

Summary

The video explains common mistakes made when fetching data in React, specifically the race condition and poor UX due to lack of caching. It suggests using a library like TanStack Query to manage loading, error, and data states more efficiently.

Structure

1Introduction to the problem
2Explaining the race condition issue
3Explaining the bad UX and caching issue
4Explaining the need for loading/error states
5Introducing TanStack Query as a solution

Product placement

The video shows code examples of a common React fetching pattern and then demonstrates the usage of TanStack Query from its official documentation website.

Call to action

Like and follow for more React tips

Original caption

Dont you dare write React like this 😡 #reactjs #reactjsdeveloper #reactjsdevelopment #htmlcss #programming #progamer #coding #fyp #code #compsci #webdeveloper #javascript #frontenddeveloper #techtok #html #htmlcsscode

More from @mrllama25

Their other posts in the index, biggest breakout first.

On-screen text

STOP 🛑 Writing React Like this 😡 Part 2 Stop Writing React Like This Just STOP React Fetching Race Condition First Render Second Render Fetch Call 1 Fetch Call 2 Set State Out-dated state, could be wrong Bad UX Loading... Show Data Navigate Away and Back Loading... Potentially unnecessary server call Good UX Loading... Show Data Navigate Away and Back Show Data Example import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' const queryClient = new QueryClient() function Example() { const query = useQuery(['todos'], fetchTodos) return ( <div> {query.isLoading ? 'Loading...' : query.isError ? 'Error!' : query.data?.map((todo) => <div key={todo.id}>{todo.title}</div>) : null} </div> ) } function App() { return ( <QueryClientProvider client={queryClient}> <Example /> </QueryClientProvider> ) } Edit on Github React Native Solid Query

Transcript

STOP 🛑 Writing React Like this 😡 Part 2 Welcome to stop writing React like this 😠 If you work with React, you might be writing it wrong A common pattern that I see in React when fetching data is this: You create a state variable and it is empty at first. And then you have a fetch request inside of a useEffect callback. After it returns, you parse the JSON and then you set the result into the state. While technically this code should be alright, here are a few things that could go wrong with this code: 1. Race condition. Let's say the component somehow unmounts and remounts again while the fetch is running. This means another fetch request is sent. And since there's no guarantee which fetch request comes back first, you might have the wrong state displayed in your component. This is the reasoning behind the addition of the two renders in React 18 strict mode. 2. Bad UX. There is no caching. Every time this component gets unmounted and remounted again, we are fetching again. This leads to a lot of unnecessary requests to your backend and it's not a great user experience. 3. What if you need a loading, error state and so on? Now it's your job to manually add those states to this component. What a pain in the butt. In this case, I recommend using a third party library such as React Query to avoid all these headaches.