Syntax - Tasty Web Development Treats

React Query + More React with Tanner Linsley

Feb 24, 2021

Tanner Linsley, creator of React Query, discusses its simplicity and benefits, eliminating the need for useEffect for side effects and state tracking. The podcast covers cancellation in TypeScript, the refetching feature of React Query, building dev tools, and the implications of React Server Components. They also touch on tools in the React ecosystem and the benefits of Mux for video hosting.

01:05:25

Creator website

Episode guests

Tanner Linsley

AI Summary

AI Chapters

Episode notes

Podcast summary created with Snipd AI

Quick takeaways

React Query simplifies data fetching in React applications with features like caching and request cancellation.

React Query integrates seamlessly with other libraries and provides valuable developer tools for debugging.

Building React Query Dev Tools within the browser enhances the visualization and accessibility of queries in different app platforms.

Deep dives

React Query: A Powerful and Easy-to-Use Data Fetching Library

React Query is an impressive library that simplifies data fetching, making it easy to work with REST APIs and GraphQL. It provides a seamless experience reminiscent of Apollo, with an intuitive API for handling data and errors. React Query not only eliminates the need for complex logic and state management, but also offers advanced features like caching, automatic refetching, and request cancellation. Its integration with React components makes it effortless to incorporate into existing projects, providing a comprehensive solution for efficient and scalable data fetching in React applications.

Introduction

2min

Managing State in React with Redux, Apollo, and React Query

10min

Cancellation for Promises and API Calls in TypeScript

2min

React Query Refetching Feature

10min

Building Dev Tools with React and React Query

11min

React Query, Apollo, SWR, and Web Accessibility

2min

React Server Components and the Implications for the Ecosystem

15min

Using Next.js with React Router V6, React Query, and Zestand for Building a Data Dashboard

3min

Discover the Benefits of Mux Video Hosting

2min

10.

Notable Features of React Query, Sick Pick, and Introduction of tanstack.com

2min

11.

Sponsorship Circle and Graph Database Platform

2min

12.

One Password X and Govey Led Strip

5min

In this episode of Syntax, Scott and Wes talk with Tanner Linsley about React Query, how it works, why you might want to use it, and more!

Deque - Sponsor

Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Mux - Sponsor

Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

Guests

Tanner Linsley

Show Notes

01:56 - What do you do?

06:04 - What is React Query?

24:19 - How does React Query use dev tools?

31:20 - What about React Context?

36:59 - Server-rendered components?

42:40 - Thoughts on static sites?

50:38 - What is the stack?

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tanner: Nozzle.io
Scott: Testing with Cypress - Sign up for the year and save 25%!
Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Syntax - Tasty Web Development Treats

React Query + More React with Tanner Linsley

Episode guests

Podcast summary created with Snipd AI

Quick takeaways

Deep dives

React Query: A Powerful and Easy-to-Use Data Fetching Library

The Convenience and Benefits of React Query's Features

React Query's Seamless Integration and Dev Tools

React Query Dev Tools: Building and Embedding Dev Tools into Apps

Using Context in React Query and Distinguishing Server State from Client State

Get the Snipd
podcast app

AI-powered
podcast player

Discover
highlights

Save any
moment

Share
& Export

AI-powered
podcast player

Discover
highlights

Syntax - Tasty Web Development Treats

React Query + More React with Tanner Linsley

Episode guests

Podcast summary created with Snipd AI

Quick takeaways

Deep dives

React Query: A Powerful and Easy-to-Use Data Fetching Library

The Convenience and Benefits of React Query's Features

React Query's Seamless Integration and Dev Tools

React Query Dev Tools: Building and Embedding Dev Tools into Apps

Using Context in React Query and Distinguishing Server State from Client State

Get the Snipdpodcast app

AI-poweredpodcast player

Discoverhighlights

Save anymoment

Share& Export

AI-poweredpodcast player

Discoverhighlights

Get the Snipd
podcast app

AI-powered
podcast player

Discover
highlights

Save any
moment

Share
& Export

AI-powered
podcast player

Discover
highlights