Learn React State Managment in 2023
React has become a popular choice for building modern web applications due to its flexibility, performance, and ease of use. One important aspect of working with React is managing state, which refers to the data that determines the behavior of a component and its children. In this tutorial, we will explore different state management techniques in React, including client-side state, server-side rendering (SSR), and the React Query library.
Client-Side State
Client-side state management refers to managing application state within the client’s web browser. This can be achieved using React’s built-in state management features, such as useState and useReducer hooks. These hooks allow developers to store and update state within individual components, making it easy to manage local state without the need for external libraries or additional overhead.
Server-Side Rendering (SSR)
Server-side rendering (SSR) is a technique for rendering web pages on the server and sending the fully rendered page to the client. This approach can improve performance and SEO, as the client receives a fully rendered page instead of having to wait for client-side rendering to complete. When it comes to state management, SSR requires a different approach, as the server needs to be able to manage and maintain the application state. This can be achieved using server-side state management techniques, such as Redux or Apollo Client, which allow state to be shared between the server and client.
React Query
React Query is a powerful data fetching and caching library for React applications. It provides a set of hooks that make it easy to fetch and manage data from APIs, and then cache and synchronize that data across components. With React Query, developers can easily handle complex state management scenarios, such as pagination, data refreshing, and background data synchronization. This library can be used in combination with client-side or server-side state management to provide a seamless and efficient data handling experience for users.
Conclusion
State management is a crucial aspect of building modern web applications with React. By understanding and leveraging different state management techniques, developers can build more scalable, efficient, and maintainable applications. Whether it’s managing state on the client-side, server-side, or using libraries like React Query, there are various options available for handling state in 2023.
Shout out to the man !
But I don't know why, when i refresh the page, i got the old data for a few seconds, if anyone have an idea.
EDIT : i've found the "issue". i use revalitdate 0. Am i crazy ?
const response = await fetch(`${process.env.ENDPOINT}/todos`, {
method: 'GET',
headers: { 'content-type': 'application/json' },
next: { revalidate: 0 },
});
please do the zustand / cross state management between server and client components. it's driving me crazy
I think you are just joking all the time in the lesson
Caching is pain in next.js. No way to clear router cache except for router.refresh() – which kinda beats the purpose of server components. Next.js caches so insanely in production tried everything but no cache invalidation property seems to work.
I also find docs confusing. They interchangeably use terms like dynamic routes, dynamic rendering and many more
Link prefetching also doesn't work as expected with dynamic rendering in production build. As per them it should be cleared after 30secs but it doesn't.
this is like a horror movie!
"Hello, teacher. I watched your tutorial video on YouTube about using Next.js 13, Prisma, and TanStackQuery, and I have two questions on my mind. First, we fetch data using Prisma and the Prisma client. However, in a client-side rendered component, when trying to use React Query and passing the Prisma client to the queryFn, it doesn't seem possible to do so. You used a fetch operation in the queryFn, so does this mean we must fetch data from an API in this case?
Secondly, we used React Query in the page component, but how can we use it in a component that is three or four levels down the component tree?"
thanks
Can you make a video like this for page routing too?
53:03 the useMutations onError uses the same context from onMutate so it should be filtered?
How is it not filtered when you queryClient.setQueryData to context.previousPosts?
Does any 1 know?
I have a much simpler solution to handle Sever&Client state. Would love to show you how i do it, maybe you could do a video about it…
Perfect! You've helped me eleviate a BIG headache with this tut – thank you 🙏
Had a lot of problems and inconsistencies with data revalidation in app router and at the end it seems that tanstack query won't be ditched for server actions anytime soon.
For anyone looking into the new revalidatePath / revalidateTag functions – they aren't working as intended from its core, and if it were – you can't specify only 1 dynamic path (like a specific slug), you have to revalidate ALL dynamic paths (there's numerous open issues on that and other opinionated logic behind it)
Why is my first load js around 360kb when using react query?
USe NextJS 13 !
Love your videos ❤
Keep ‘em coming!
great video
is next 13 stable ?
You should use SWR instead of React Query. It's built by Vercel and the Optimistic UI update is way easier and cleaner to use.
Haven't explored nextjs properly yet, but can't we use RTK query with next js??? RTK query with react js works very fine compared to this gruesome configuration of react query+ next js
did I just delete it?
Don't tell anyone 😂😂
32:37
waiting for zustand and can we use one of them react query or zustand or they both work together