The infinite list (scroll) feature has existed for a while. It’s a great way to enhance your application’s UX.
There are many third-party libraries available, but if you like to challenge yourself as I do, we’ll explore the implementation from scratch using Hooks in this post.
Let’s quick code a simple app component. We initialize an empty state and pass references to the
setState as props to our
InfiniteList component will return an unordered list of dog images fetched from the Dog API.
Once our request is successful, we push the images to the parent’s state. We’ll make sure not to overwrite the previous state, as we’ll use the
getData() function multiple times to fetch more images. …
In this post, we’ll continue to explore the usage of the React Context API and how you can add multiple UI languages to your React app.
If you’ve read my previous post, you’re familiar with how Context works and why we need it. If not, read: React Context API. Part 1 — Dark Theme.
Start by creating a simple app. This app will display information about movies.
We’ll mock an API fetch request, to keep the app simple and focus on the feature implementation. This time, we don’t care about CSS.
As in the previous post, we initialize a new Context by calling a
React.createContext function which takes an object as an argument. …
In this series, we’ll explore some potential use cases of the React Context API. I’ll also share my approach of implementing some useful features. In part 1, we’ll go over the UI theme, or dark theme switcher.
Context is React’s out-of-the-box solution to solve the props drilling problem. As with Redux, it allows us to create a kind of global state (component) which can be accessed anywhere from a component tree.
Context is best when the data might need to be accessed at many components throughout an application.
Some examples of this kind of data: