Data Management In React

Articles & Tutorials

Using Dexie.js in React apps for offline data storage (
Feb 25, 2021
In this article, we’ll see what IndexedDB is all about and how we can use Dexie.js, a minimalistic wrapper for IndexedDB, to handle offline data storage in our web applications.
  • Ebenezer Don
What’s new in React Query 3 (
Feb 16, 2021
In a nutshell, React Query is a set of custom hooks that makes fetching, caching, and updating asynchronous or server state in React easy.
  • Lawrence Eagles
React Query — An Underrated State Management Tool (
Sep 18, 2020
In this article, let’s discuss how React Query addresses the above-mentioned issue by building a small pokemon application and diving into its key concepts.
  • Tharaka Romesh
How and Why You Should Use React Query (
Jul 29, 2020
Simplify data fetching with react-query’s custom hooks.
  • Nathan Sebhastian
What’s new in react-query v2 (
Jul 22, 2020
In this post, we’ll discuss briefly the new changes and rewrite an app built with react-query v1 in a previous article to use the new version.
  • Abdulazeez Abdulazeez Adeshina
Four Ways to Fetch Data in React (
Jul 06, 2020
React is a focused component library. So it has no opinion on how to request remote data. If you’re requesting and sending data to web APIs via HTTP, here are four options to consider.
An Introduction To SWR: React Hooks For Remote Data Fetching (
Jun 22, 2020
In this article, we’ll be looking at a new way of retrieving data in React Apps named SWR. This is a set of hooks for remote data fetching that makes things easier, such as caching, pagination, and so on.
  • Ibrahima Ndaw
Use SWR with Geolocation (
Jun 19, 2020
Learn how to use SWR with the Geolocation WebAPI to show the user location in a map and keep it up-to-date with any change.
  • Sergio Xalambrí
Consuming REST APIs In React With Fetch And Axios (
Jun 03, 2020
If you’re a React developer who’d like to learn how you can start consuming APIs in your React applications, then this article is for you. Shedrack Akintayo explains what a REST API is and how to build a simple application that consumes a REST API by using both Fetch API and Axios.
  • Shedrack Akintayo
Sync SWR cache with Web Storage (
May 15, 2020
Use Web Storage to retain SWR cache between page reloads
  • Sergio Xalambrí
Sync WebApp Session Status between Tabs with SWR (
May 15, 2020
Implement a synced session status using SWR to keep the user logged in/out in all the tabs or windows
  • Sergio Xalambrí
Fetching Data in React using Hooks (
Apr 28, 2020
Making network requests, memoizing, and handling errors using React hooks.
  • Chidume Nnamdi
Getting started with Postgres in your React app (
Mar 19, 2020
In this tutorial, we’ll demonstrate how to create a small application using Express and Node.js that can record and remove information from a PostgreSQL database according to the HTTP requests it receives. We’ll then create a simple React app to test and see how the entire application flows from front to back.
  • Nathan Sebhastian
How SWR works behind the scenes (
Feb 24, 2020
In this post we're going to build our own version of SWR, if only to understand how it works.
  • Julian Garamendy
Stale-while-revalidate Data Fetching with React Hooks: A Guide (
Jan 22, 2020
Leveraging the stale-while-revalidate HTTP Cache-Control extension is a popular technique. It involves using cached (stale) assets if they are found in the cache, and then revalidating the cache and updating it with a newer version of the asset if needed. Hence the name stale-while-revalidate.
  • Avi Aryan
How Does SWR Work? (
Dec 15, 2019
SWR is a great package from Zeit to help make it easier to fetch remote data with hooks. It is based on the stale-while-revalidate RFC, which in simple terms says to show stale (old) data while you are fetching a new version of the data.
How to Fetch Data with React Hooks (
Dec 14, 2019
In this tutorial, we're going to learn about new React feature called "Hooks". Well, I have written a lot of tutorials about React Hooks itself, but in this parcticular post, we're going to learn how we can send an HTTP request asynchronously with this awesome React feature.
  • Rahman Fadhil
Experimental React: Using Suspense for data fetching (
Nov 29, 2019
If you’re a React developer, by now you’ve most likely heard of Concurrent Mode. If you’re still wondering what that is, you’re in the right place.
  • Ovie Okeh
Feed data to a Next.js component using getInitialProps (
Nov 13, 2019
How to feed data to a Next.js component using getInitialProps
Lifecycle methods, hooks, suspense: which's best for fetching in React? (
Nov 06, 2019
Lifecycle methods, hooks, and suspense are approaches to fetch data in React. I’ll describe them in examples and demos, distill the benefits and drawbacks of each one.
  • Dmitri Pavlutin
How to handle async side effects in 2019 (
Oct 29, 2019
There’s been a bunch of different approaches to handling async operations, including Redux-Saga, but in this article we’ll be focusing on what I think is currently the best approach: using react-async.
  • Peter Ekene Eze
Make CRUD simple with Node, GraphQL, and React (
Aug 28, 2019
In this article, we’re going to implement simple end-to-end CRUD operations with GraphQL.
  • Avanthika Meenakshi
Fetching Data in React using React Async (
Jul 31, 2019
Let’s look at various examples using components, hooks and helpers to see how we can implement loading states when making requests.
  • Kingsley Silas
Making impossible states impossible: data structures in React (
Jul 22, 2019
Today we're talking about avoiding bugs by structuring your data such that the bug can never occur.
React Async for Declarative Data Fetching (
May 31, 2019
Generally, there are two ways of writing code: Imperatively/Declaratively and two ways of fetching Data: Synchronously/Asynchronously. We are more convenient with making requests imperatively using fetch or libraries like axios.
Introducing react-use-database: client-side relational data just got easier (
Mar 05, 2019
With react-use-database you get the best of both worlds. It forces you to think about your client-side data in the context of a queryable database. It gives you two global data stores: an entity store and a query store.
  • Austin Malerba
Making HTTPS request in React (
Mar 04, 2019
There will come a time in our React app when we will want to render data from an API endpoint. Angular has a built-in HTTP module that lets devs to easily make HTTP requests in an Angular app.
  • Chidume Nnamdi
Graceful GraphQL with React Hooks and MobX (
Feb 18, 2019
GraphQL meets React Hooks and forms a powerful friendship. They should connect with MobX too!
  • Daniel K.
Using Wordpress with React.js (
Feb 18, 2019
In this article, we will cover how to use WordPress as a headless CMS by leveraging the WordPress API and React js when building a project.
  • Tim Smith
Firebase as simple database to React app (
Feb 13, 2019
Firebase is an all-in-one backend as a service provider (BaaS) that provides database, authentication, cloud storage among their many services. In this tutorial you're going to learn how to use Firebase Real Time Database service in React application.
  • Nathan Sebhastian
React Suspense with GraphQL (
Feb 08, 2019
Warning, the React docs say that Suspense does not yet support data loading, so in the future there may be breaking changes & better options available.
Reading Data From A JSON File With Gatsby + GraphQL (
Feb 08, 2019
Use gatsby-transformer-json to read data from a local JSON file and dynamically generate list items in a React component.
  • Emma Wedekind
How to load data in React with redux-thunk, redux-saga, suspense, & hooks (
Jan 31, 2019
There is no one clear way how to handle asynchronous calls to the API (backend) or any other side effects. In this article I’m trying to compare different approaches to solving this problem.
  • Valerii Tereshchenko
How to fetch data with React Hooks? (
Nov 12, 2018
A tutorial on how to fetch data in React with Hooks from third-party APIs. You will use state and effect hooks for the data request from a real API.
Getting Started with React – An Overview and Walkthrough (
Aug 19, 2018
An overview and walkthrough of fundamental React concepts, such as components, state, and props, as well as submitting forms, pulling data from an API, and deploying a React app to production.
  • Tania Rascia
Data fetching in Redux apps  -  a 100% correct approach (
Aug 08, 2018
Sadly, state management is just one of the many issues you have to deal with while building robust applications. What about handling side effects (like network requests, the most common)?
  • Ohans Emmanuel
Using data in React with the Fetch API and axios (
Aug 03, 2018
What if you want to handle data from an API? That's the purpose of this tutorial. Specifically, we'll make use of the Fetch API and axios as examples for how to request and use data.
  • Kingsley Silas
How to fetch data in React (
Jul 06, 2018
The article gives you a walkthrough on how to fetch data in React.
Why Apollo: Advantages, Disadvantages & Alternatives (
Jul 04, 2018
Overview about the advantages and disadvantages of using Apollo and its ecosystem for JavaScript applications. It mentions also Apollo alternatives such as Urql and Relay for React applications.
How to use Redux with Apollo Client and GraphQL in React (
Jun 26, 2018
When having a GraphQL server, Apollo Client can be a valid option for your remote data. How fits Redux into the equation? This tutorial shows you an example on how Redux and Apollo Client can be used together in a React application. Whereas Redux is used for local data, Apollo Client is used for remote data.
Getting Started with GitHub's GraphQL API (
Jun 09, 2018
I encourage GraphQL newcomers to start with the client-side by consuming a third-party GraphQL API before diving into the server-side of using GraphQL.
A minimal Apollo Client in React Example (
Jun 05, 2018
The tutorial guides you through building a minimal Apollo Client in React example application where Apollo Client is used for remote data and React's local state for local data.
A complete React with Apollo and GraphQL Tutorial (
May 01, 2018
In this tutorial, you will learn how to combine React with GraphQL in your application by using Apollo.
Getting Started With React And GraphQL (
Apr 22, 2018
In this tutorial you’ll learn how to use GraphQL in a React web application. To make use of GraphQL inside your React project we’ll be using the React Apollo library.
  • Sebastian Eschweiler
A complete React with GraphQL Tutorial (
Apr 09, 2018
In this tutorial, you will learn how to combine React with GraphQL in your application.
How To Build A Skin For Your Web App With React And WordPress (
Mar 07, 2018
If you’ve been looking for a content-driven solution, this article will explain how you can build a SPA WordPress theme with React.
  • Muhammad Muhsin
How does GraphQL get the data from the database? (
Nov 13, 2017
In this article, I will go through how the server process a GraphQL-query from the client, and how it decides what data to send back to the client.
React.js with WordPress as a Backend: WP REST API Example (
Sep 19, 2017
WordPress Rest API is a huge step forward for frontend developers looking to combine the power of JavaScript tools like React.js with WordPress.
  • Maxime LaBoissonniere
Strapping React.js on a WordPress Backend: WP REST API Example (
Sep 14, 2017
I'll use WordPress as a backend, and WordPress REST API to feed data into a simple React e-commerce SPA.
  • Maxime Laboissonniere
Fetching API Data with React.js (
Aug 07, 2017
In this post, I’ll walk you through the steps to use fetch to get data from an API using React, but I’ll be going slow enough that, even if this is your first time using an API, or you’re fairly new to react, you’ll hopefully still be able to follow along.
  • Ethan Jarrell
Async Actions with Redux Thunk demystified (
Apr 25, 2017
Async/Ajax being in the advanced section of the official documentation can make developers afraid or hesitant to start learning about it.

Video Guides & Talks

All About React Query (with Tanner Linsley) (
Oct 21, 2020
There‘s a lot of buzz about React Query and how much it can simplify your development workflow. In this episode, we’ll learn all about it from the TanStack creator himself!
  • Jason Lengstorf
  • Tanner Linsley
Posting Data to Server from React - Query Updates from Mutations (
Jun 18, 2020
In React you often need to persist data to the server. This video shows how to use react-query mutation functionality to post data to the server, and update the UI with fresh content. We cover three approaches to UI updates, going from easiest but worst performing, to most complicated but best performing.
React Data Fetching with Hooks using SWR (
Dec 16, 2019
We will show how to use SWR, how to configure it globally, and a pattern I like to use which separates data fetching from data display.
Data Visualization in React Using Gatsby (
Aug 21, 2019
How can you create data visualization that works well in progressive web apps? On this episode, Swizec Teller joins to teach us how to use D3, React, and Gatsby to create SSR-friendly data visualizations for high performance dataviz.
Loading and Filtering API Data in Gatsby (
Aug 08, 2019
How does Gatsby load data from other platforms and sources? And how do we actually use that data once it’s loaded? On this episode, Brittney Ball pairs with Jason to create a source plugin and build a site using its data.
  • Jason Lengstorf
  • Brittney Ball
GraphQL + Suspense (
May 21, 2019
In this talk, Jared Palmer, Engineering Lead at The Palmer Group goes deep on the past, present, and future of data fetching in React apps.
Saving Form State in Local Storage with React (
Mar 15, 2019
I've got a contact form that I need to save to local storage so if people refresh the page and come back it's still around. Let's see how that goes!
Cancelling an Axios request in a useEffect hook (
Feb 19, 2019
This video shows how to cancel an Axios request before it completes. We'll use a useEffect hook and it's cleanup function to help us accomplish this.
Convenient Data Fetching with Higher Order Components (
Nov 05, 2018
We'll be showing a small and self-contained data provider library - using higher-order React components and Redux on client side, and requiring zero changes to you backend. We'll also keep our components from worrying about how and when the fetching happens - defining instead only what data is required, while abstracting all of the race-conditions and caching via a single HOC, handling the hard parts.
  • Martin Pinter
GraphQL Workshop - React Kyiv (
Jul 08, 2018
Learn GraphQL by doing! We will have a workshop where we will create a bsic graphql backend with prisma and then connect to the frontend with react Apollo.
Getting Started With React And GraphQL (
Apr 22, 2018
In this tutorial you’ll learn how to use GraphQL in a React web application. To make use of GraphQL inside your React project we’ll be using the React Apollo library.
  • Sebastian Eschweiler
There and back again: grokking state and data (
Apr 18, 2018
Many teams have been discussing on whether to go the immutable or mutable state route. Flux or MVC or MVVM? Redux, MobX or Apollo? Instead of answering the question, in this talk we will look at JavaScript code on a more fundamental level: How do data structures work in JavaScript. What assumptions can be we make if we treat them to be immutable? Or mutable? How can we express concepts like identities, references, collections, mutations, derivations in either case? And can we bent the rules between the two? This talk will provide you a deeper understanding of the difference between state and data.
A Postgres-backed GraphQL BAAS (
Mar 31, 2018
A review of how we created a GraphQL backend backed by Postgres. The key challenges faced by real-world apps and our solution approach, specifically around expressive query arguments, access control, schema iteration, sharing auth between multiple API backends. We will also review some quick tips to make the most out of Postgres and reveal some early performance benchmarks. We will end with a demo how you can create complex data models and make intuitive graphql queries from your app without requiring in-depth knowledge of graphql schemas.
  • Tanmai Gopal
ReactCasts #13 - Server Side Rendering: Data Fetching & Routing (
Jul 27, 2017
I will create a complete, server-rendered React application with routing and data fetching.
  • Cássio Souza
Dealing with data from APIs in ReactJS (
Jan 18, 2017
In this video I'll show you how you can use React to fetch data from an API and render it in your components. We'll use the fetch API to make a request and make use of React's lifecycle hooks to start the request when our component is being mounted.
GraphQL at Shopify (
Nov 04, 2016
In this talk, we'll explore how Shopify designed and built its GraphQL API to make it easy for any team to extend and use our GraphQL schema.
  • Apollo GraphQL

Books & Guides

Principled GraphQL (
Feb 12, 2019
Best practices for implementing and scaling a data graph.
  • Geoff Schmidt
  • Matt DeBergalis

Courses & Video Series

React Native for Designers Part 2 (
May 15, 2019
Learn to build an iOS and Android app from scratch. A 6-hour course for designers teaching custom animations, Styled Components, Redux, API data, HTML rendering with Markdown and adaptive layouts in React Native.
  • Meng To
React Native for Designers (
Feb 13, 2019
Learn to build an iOS and Android app from scratch. A 6-hour course teaching you custom animations, Styled Components, Redux, API data and adaptive layouts in React Native.
  • Meng To
Building Serverless Web Applications with React & AWS Amplify (
Feb 05, 2019
This course walks you through setup and implementation to get your cloud-based application up and running. You’ll finish the course ready to quickly and easily deploy your serverless React application, so users can start using and enjoying it right away.
Introduction to GraphQL (
Jan 22, 2019
Learn how GraphQL empowers more flexibility into your APIs – and learn to build GraphQL APIs with Apollo Server! You'll create GraphQL Schemas using scalar types, object type, queries and mutations. Then create resolvers to fullfill the data. Use interfaces and unions. Finally, add authentication to lock down resources.
  • Scott Moss
Apollo Client State with React (
Jan 15, 2019
Discover how to manage client-side state using Apollo with React. Learn how to configure and query client state, mutate client state, mutate the cache, and more.
  • Eric Greene
Building Apps with Third Party Integrations (
Dec 27, 2018
How to make safe, secure and robust web apps that use third party APIs.
  • Mike Solomon
GraphQL Data in React with Apollo Client (
Dec 05, 2018
This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.
Consuming Python APIs with React (
Nov 30, 2018
Bring your Python full stack web development experience full circle by integrating your Django backend with a React frontend
  • Wayne Merry
Scalable Offline-Ready GraphQL Applications with AWS AppSync & React (
Nov 27, 2018
In this course, Nader Dabit will show you how to build a production-ready GraphQL API through AWS AppSync
Building React and ASP.NET MVC 5 Applications (
Nov 27, 2018
Learn to develop full-stack React and ASP.NET MVC 5 web apps
  • Kazi Nasrat Ali
Full Stack Development with React and ASP.NET Core 2 (
Nov 23, 2018
Create a website for full stack development with React on the front end & ASP.NET Core at the backend
  • Joseph Jorden
Migrating from REST to GraphQL (
Nov 15, 2018
Learn how to migrate from REST APIs to GraphQL. Convert your REST APIs operations into GraphQL mutations and queries.
GraphQL With React & Apollo (
Nov 12, 2018
In this series we will build a small app using GraphQL, Express, React & Apollo.
React: SPAs (
Nov 07, 2018
React: SPAs shows you how to build a polished single-page application (SPA), with tools for managing users and reading and writing data from a database
  • Ray Villalobos
Pro Gatsby 2 (
Nov 02, 2018
Learn how to build the fastest websites on the planet with this Gatsby v2, a new static site generator using React.
Full Stack Advanced React & GraphQL (
Oct 11, 2018
Learn everything you need to build a full stack application with React.js and GraphQL
Level 1 Apollo Client with React (
Jul 31, 2018
Learn the hottest GraphQL library out with Level 1 Apollo Client with React. In this series, I teach you how to connect to GraphQL APIs, the new Query, Mutation and ApolloConsumer components.
Rapid Development on AWS: React, Node.js & GraphQL (
Jul 16, 2018
Learn how to make your way through all the Amazon Web Services' offerings
Building a chat app with React.js and Chatkit (
Jun 26, 2018
Learn React.js through building a real-world chat app
  • Per Harald Borgen
Building an App with React.js and MeteorJS (
May 01, 2018
Learn how to build a data-driven, cross-platform app with the data management capabilities and reusable UI components in MeteorJS and React.js.
Headless WordPress (
Apr 30, 2018
Learn how you can build a headless WordPress site with ease using both Next.js or Gatsby
MERN Stack Front To Back: Full Stack React, Redux & Node.js (
Apr 15, 2018
Build and deploy a social network with Node.js, Express, React, Redux & MongoDB. Learn how to put it all together.
React: Working with APIs (
Feb 27, 2018
Learn how to make API calls from your React applications using two techniques: built-in fetch methods and the axios library.
Level 2 React Native with GraphQL (
Jan 31, 2018
Over 25 videos, this series will teach you more complex aspects of React Native while using a GraphQL API
Full-stack GraphQL with Apollo, Meteor & React (
Jan 02, 2018
In this free series, I'll be teaching GraphQL with Apollo, Meteor & React to build a full-stack app.
Redux & React For Everyone (
Dec 29, 2017
Learn Redux with React with 21 practical, easy to follow videos & code
Build React Components from Streams with RxJS and Recompose (
Dec 19, 2017
This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React components.
  • John Lindquist
Async React with Redux Saga (
Dec 19, 2017
In this course we are going to take an empty React and Redux application and add Redux Saga side effects.
  • Tyler Clark
The Complete React Native and Redux Course (
Nov 14, 2017
iOS and Android App Development from scratch - build full React Native mobile apps ridiculously fast!
  • Stephen Grider
React JS prototyping (
Nov 08, 2017
In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
  • Mattias Petter Johansson
Building Real-time Apps with React,, and RethinkDB (
Oct 22, 2017
This course will teach you how to develop real-time applications using React, Node.js,, and RethinkDB in a manner that will make the knowledge transferable to any other real-time stack.
  • Hendrik Swanepoel
Up and Running with redux-observable (
Oct 06, 2017
Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions.
  • Shane Osbourne
Full Stack React & LoopBack (
Oct 02, 2017
We will setup our backend LoopBack API, connect MongoDB and add some meetups through the explorer.
Redux Saga (
Aug 20, 2017
In this course, you'll learn about Redux Saga, ES6, testing, effects, and channels
Build A React App With Redux (
Aug 14, 2017
In this course you will learn how to build a production quality React application using Redux.
  • Andy Van Slaars
React 101 (
Aug 06, 2017
Learn how to build 3 practical React components from scratch!
  • Petr Tichy
Node with React: Fullstack Web Development (
Jul 26, 2017
Build and deploy fullstack web apps with NodeJS, React, Redux, Express, and MongoDB.
  • Stephen Grider
Advanced Redux (
Jun 01, 2017
This course will teach you advanced Redux techniques, including using sagas, using selectors, creating React components, and creating middleware.
Firebase + React: Real-time, Serverless Web Apps (
Mar 31, 2017
This course is a must for any React and Redux users who want to integrate with Firebase’s cloud-hosted NoSQL database platform to create robust web and mobile applications!
GraphQL with React: The Complete Developers Guide (
Feb 17, 2017
Learn and master GraphQL by building real web apps with React and Node.
  • Stephen Grider
Learning Redux (
Dec 23, 2016
Explore Redux, the JavaScript library for managing client data, and learn how to build a data layer for an interface made of React components.
  • Alex Banks
Building React Applications with Idiomatic Redux (
Jun 02, 2016
Even if you have already spent time studying Redux, this course will show you better practices straight from the library's creator Dan Abramov.
Meteor and React for Realtime Apps (
May 24, 2016
Master the fundamentals of Meteor and React with this tutorial as you develop secure, dynamic apps.
  • Stephen Grider

Podcast Episodes

RRU 046: GraphQL vs REST APIs with Max Desiatov (
Jan 29, 2019
  • Charles Max Wood
  • Justin Bennett
  • Lucas Reis
  • Max Desiatov
JSJ 307: Apollo with Peggy Rayzis (
Apr 03, 2018
In this episode, the JavaScript Jabber panelists talk about Apollo with Peggy Rayzis. She discusses what GraphQL is and how it is used, as well as how they use it in the Apollo team to make their lives as developers easier. They also touch on when it would work best to use GraphQL and when it is not ideal to use it.
  • Charles Max Wood
  • Aimee Knight
  • AJ ONeal
  • Peggy Rayzis


@nozbe/watermelondb (
Aug 02, 2019
High-performance reactive database for powerful React and React Native apps.
  • Radek Pietruszewski
react-use-database (
Feb 19, 2019
react-use-database gives you an opinionated interface, efficient data flow, and concise global state management.
  • Austin Malerba