Member-only story
Exploring Caching Techniques in React
How to use memoization, contexts, useMemo, useState, and useEffect
Fetching data in React is one thing. Storing and caching this data is another story. The possibilities seem endless and the differences are often subtle, which makes choosing the right technique a bit of a hurdle sometimes.
Today, we’ll explore different techniques and look at all their details and subtleties. Should I use useMemo or memoization? Should I store data with useState and a context? When we’re done, you should be able to comfortably make informed choices with regards to caching data. You’ll learn about all the ins and outs.
And there are a lot of animated GIFs. What else could you wish for?
Let’s get started!
Our Data
Before we dive into the code, we can have a quick look at the data that we will be fetching in (most of) our components. The file that acts as our API looks like this:
