Log in

Exploring React Query: Workshops and Talks Overview

Discover the latest insights on React Query through a series of in-depth workshops and talks covering server components migration, React Query Lite, global state management, and more.

React Query Migration to Server Components

Learn about the migration process to server components using Next.js and React Query. This workshop covers planning, preparing, and setting up server components, along with migrating pages, adding layouts, and moving components to the server. Explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the app router features. Topics include handling authentication, rendering in server components, and the impact on server load and costs.

Learn more

Creating React Query Lite

Dive into the creation of React Query Lite, a simplified version of React Query. Discover concepts like caching, background fetching, and garbage collection. Explore the use of query observers and the integration of React Query with React. The talk also delves into React Native tools, testing, and the stability of React Query's API.

Learn more

Global State Management with React Query

Understand global state management challenges and the solution offered by React Query. Explore extracting logic into custom hooks, addressing state and fetching issues, and showcasing optimistic updates with mutation. Learn about using React Query for data fetching and mutations, the future of global state management, and user feedback on React Query.

Learn more

FAQ

Other related articles

React Query and Auth: Who is Responsible for What?
React Advanced 2021React Advanced 2021
19 min
React Query and Auth: Who is Responsible for What?
Top Content
Bonnie Schulkin
Bonnie Schulkin
Teacher, Coder & Testing Enthusiast
This talk introduces React Query and Auth, discussing how React Query maintains server state on the client and handles mutations and data updates. The day spa app example demonstrates the use of React Query to fetch data and handle user authentication. React Query is also useful for managing user data and ensuring accurate data from the server. The talk highlights the importance of addressing the three main players in user data: React Query, Auth Functions, and persistence across sessions.
reactreact queryreact query authenticationreact query best practicesreact query cachingreact query local storage
All You Need Is a Contract…
React Advanced 2023React Advanced 2023
29 min
All You Need Is a Contract…
Watch video: All You Need Is a Contract…
Daniel Afonso
Daniel Afonso
PagerDuty
The speaker discusses the challenges of server state and test maintenance, and how they found solutions using React Query and Mock Service Worker. They emphasize the benefits of defining contracts for faster development and stress reduction. The speaker also highlights the advantages of using Mock Service Worker over mock servers and explains how it allows for easy customization and test overrides. They mention the upcoming release of V2 of MS-Double and encourage the audience to stay updated.
devtoolsdeveloper experienceapi development
Best Practices and Patterns for Managing API Requests and States
React Advanced 2022React Advanced 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
Thomas Findlay
Thomas Findlay
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.
best practicespatternsapi developmentreact data fetching
Exploring React My Own Way
React Summit Remote Edition 2020React Summit Remote Edition 2020
11 min
Exploring React My Own Way
Tathagat Thapliyal
Tathagat Thapliyal
Mentorship available
CRED
The Talk provides an introduction to React and discusses the speaker's journey of learning React effectively. It emphasizes the importance of understanding the purpose of learning React and following a step-by-step process. The Talk also highlights the need to learn React independently before diving into other tech stacks. Practical learning, tracking coding activity, and learning in public are recommended approaches. The speaker mentions working with technologies like Node.js, ExpressJS, React, EmberJS, VueJS, Nuxt, and Next. The Talk concludes with the speaker's contact information and availability for discussions on operating systems and full stack development.
react
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
React Advanced 2023React Advanced 2023
29 min
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
Top Content
Watch video: How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
Jerel Miller
Alessia Bellisario
2 authors
This Talk discusses using suspense and GraphQL with Apollo client to build great end user experiences. It explains the core concepts of React suspense and how to fetch data in suspense with Apollo client's new suspense hooks. The Talk also covers optimizing the loading experience by adding suspense boundaries, using the defer directive in GraphQL, and integrating suspense hooks with React 18 transitions. Future plans include new APIs like suspenseful use fragment and lazy use background query in Apollo client 3.9. Testing strategies for suspense in components and customizing loading states are also mentioned.
reactgraphqlapolloreact 18typescript react apollo
Simplifying Data Management in React With React Query
React Advanced 2023React Advanced 2023
16 min
Simplifying Data Management in React With React Query
Watch video: Simplifying Data Management in React With React Query
Harsh Shah
Harsh Shah
Pedals Up
Today's talk introduces React Query, a library that simplifies data management in React applications. It covers the core concepts and features of React Query, including data fetching, caching, and mutation. The talk also discusses query invalidation and cache time, highlighting how React Query optimizes performance and reduces code complexity.
react querystate management
Living on the Edge
React Advanced 2021React Advanced 2021
36 min
Living on the Edge
Sunil Pai
Sunil Pai
Cloudflare
The Talk discusses the future of React and introduces new APIs, including streaming rendering and server components. React Suspense allows for asynchronous loading of components and data fetching. The use of serverless computing, specifically Cloudflare Workers, is explored as a way to improve performance. The Talk emphasizes the potential for simplifying the React ecosystem and the excitement about the new API.
reactweb developmentreact 18cloudflare
Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
reactreact querystate managementreact state managementserver state react
React Server Components
React Day Berlin 2023React Day Berlin 2023
27 min
React Server Components
Watch video: React Server Components
Tejas Kumar
Tejas Kumar
Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.
React server components solve the problem of interrupting user interfaces caused by CPU-bound or network-bound web applications. They allow for read-only content to be rendered on the server and interactive elements to be shipped to the client, reducing code shipped and improving performance. Server-side rendering and server-side fetching improve the user experience by reducing delays and flash of unstyled content. Soft navigation with server components enables re-rendering without hard navigation, and using frameworks like Next.js helps with debugging and deployment challenges.
react server components
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
React Advanced 2023React Advanced 2023
28 min
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
Watch video: The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
Lenz Weber-Tronic
Lenz Weber-Tronic
Apollo GraphQL
This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.
performancecase studyssrapolloreact server componentsreact fetching libraryssr react js
GraphQL in 2023 - Still Relevant?
React Summit 2023React Summit 2023
24 min
GraphQL in 2023 - Still Relevant?
Watch video: GraphQL in 2023 - Still Relevant?
Lenz Weber-Tronic
Jerel Miller
2 authors
Today we'll discuss whether GraphQL is still relevant in 2023, exploring its benefits and unique features. We'll cover caching data on the client, data normalization, and reducing redundancy. We'll also look at updating data with mutations and upcoming features like the defer directive. Additionally, we'll explore the power of GraphQL Federation and how it allows for observing changes and making informed decisions.
web developmentgraphql
Deep Diving on Concurrent React
React Advanced 2022React Advanced 2022
29 min
Deep Diving on Concurrent React
Matheus Albuquerque
Matheus Albuquerque
I'm a Sr. Front-End Engineer at Medallia
The Talk discussed Concurrent React and its impact on app performance, particularly in relation to long tasks on the main thread. It explored parallelism with workers and the challenges of WebAssembly for UI tasks. The concepts of concurrency, scheduling, and rendering were covered, along with techniques for optimizing performance and tackling wasted renders. The Talk also highlighted the benefits of hydration improvements and the new profiler in Concurrent React, and mentioned future enhancements such as React fetch and native scheduling primitives. The importance of understanding React internals and correlating performance metrics with business metrics was emphasized.
reactconcurrent renderingreact 18deep dive
Stop Abusing Client State Management
React Summit 2022React Summit 2022
21 min
Stop Abusing Client State Management
Nir Parisian
Nir Parisian
Enpitech
This Talk discusses state management abuse and the use of React Query for API handling in React applications. The speaker demonstrates implementing loading indicators, custom hooks, caching mechanisms, and introduces React Query as a powerful tool for fetching, caching, and loading data. The conclusion emphasizes that React Query simplifies API handling without the need for complex state management tools like Redux or MobX.
react querystate managementprogramming concepts
Turning the Cloud Inside Out
React Summit Remote Edition 2021React Summit Remote Edition 2021
36 min
Turning the Cloud Inside Out
Nader Dabit
Nader Dabit
Author, open source developer working in blockchain space with Edge & Node and The Graph Protocol.
Today's Talk discusses turning the cloud inside out using GraphQL, highlighting its benefits such as type validation, real-time capabilities, and query efficiency. It explores the use of GraphQL as an API gateway, particularly in the context of microservices, third-party APIs, and blockchain. The talk also covers the efficient indexing and cloud integration offered by GraphQL, as well as building cloud APIs with AWS using API Gateway and AWS AppSync. It concludes with insights on deploying GraphQL APIs with tools like Amplify and CDK, and creating GraphQL APIs backed by Lambda and DynamoDB.
web developmentcloudgraphqlaws
Should You Use React in 2023?
React Summit 2023React Summit 2023
31 min
Should You Use React in 2023?
Top Content
Watch video: Should You Use React in 2023?
Tru Narla
Jordan Gensler
2 authors
React is a popular choice, but there are claims that it's dead and should be replaced. React has good out-of-the-box performance and is suitable for most applications. React Native allows code sharing between React and React Native. When considering a migration from React to Svelte, there are trade-offs to consider. React offers a standardized way of working and easy onboarding.
reactframeworks
Inside Fiber: the in-depth overview you wanted a TLDR for
React Summit 2022React Summit 2022
27 min
Inside Fiber: the in-depth overview you wanted a TLDR for
Matheus Albuquerque
Matheus Albuquerque
I'm a Sr. Front-End Engineer at Medallia
This Talk explores the internals of React Fiber and its implications. It covers topics such as fibres and units of work, inspecting elements and parent matching, pattern matching and coroutines, and the influence of coroutines on concurrent React. The Talk also discusses effect handlers in React, handling side effects in components, and the history of effect handlers in React. It concludes by emphasizing the importance of understanding React internals and provides learning resources for further exploration.
reactreact 18deep dive