React useReducer with Middleware (robinwieruch.de)
Dec 10, 2020
In this React Hooks tutorial, I want to show you how to use a middleware for React's useReducer Hook. This middleware would run either before or after the state transition of the reducer and enables you to opt-in features.
How to Test React.useEffect (epicreact.dev)
Dec 04, 2020
So, you've got some code in React.useEffect and you want to know how to test it. This is a pretty common question. The answer is kinda anti-climatic and general.
Sticky Table Header with React Hooks (webup.org)
Dec 01, 2020
Using a <table /> element instead of flexbox for data presentation is a good thing. How to turn the table header sticky with the help of React in that case? How to apply the solution into a production code? This blog post is all about that.
How React Hooks Work in simple words? (dev.to)
Nov 13, 2020
Throttling data requests with React Hooks (blog.logrocket.com)
Oct 21, 2020
When an application loads data, typically, relatively few HTTP requests are made. For example, if we imagine we’re making a student administration application, then a “view” screen might make a single HTTP request to load that student’s data before displaying it.
Why React Hooks over HOCs (robinwieruch.de)
Oct 01, 2020
I am still an advocate for higher-order components these days, because there composable nature of enhancing components fascinates me. However, there are problems with HOCs which shouldn't be denied and which are entirely solved by React Hooks.
Controlled Inputs Using React Hooks (dmitripavlutin.com)
Sep 29, 2020
There are 2 approaches to access the value of an input element in React. In the first approach, named uncontrolled input, you access the value from a reference to the input element. The second approach, which I like because it doesn’t use references, is using a controlled input. Let’s see how to design controlled inputs using React hooks.
Myths about useEffect (epicreact.dev)
Sep 24, 2020
I've taught React to tens of thousands of developers. Before and after hooks were released. One thing I've observed is people tend to struggle with the useEffect hook and there are some common hang-ups for them that I'd like to address here.
A Complete Beginner's Guide to React: Hooks Edition (welearncode.com)
Sep 15, 2020
A few years ago, I wrote an introductory React tutorial based on a workshop I taught. Since that point in history, I've taught hundreds of new web developers React, and the library has evolved significantly. I thought it was time to come back to the fundamentals and discuss learning React from absolute zero in the era of Hooks.
How to useMemo in React (robinwieruch.de)
Jul 13, 2020
React's useMemo Hook can be used to optimize the computation costs of your React function components. We will got through an example component to illustrate the problem first, and then solve it with React's useMemo Hook.
How to useCallback in React (robinwieruch.de)
Jul 06, 2020
React's useCallback Hook can be used to optimize the rendering behavior of your React function components. We will go through an example component to illustrate the problem first, and then solve it with React's useCallback Hook.
The post-Hooks guide to React call order (blog.logrocket.com)
Jun 03, 2020
The goal of this article — in addition to stressing that writing Hooks requires a different mindset than writing class components — is to give you a better overview of how, exactly, the whole React component lifecycle works. That is to say, in what order the code is being executed in your app.
Add an Item to a List in React (robinwieruch.de)
May 14, 2020
It's a common task in React to add an item to a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to add an item, you have to use React's state management.
Getting Started With The React Hooks API (smashingmagazine.com)
Apr 10, 2020
In this tutorial, you are going to learn and understand what React hooks are, the basic React Hooks that are available and also examples of how to write them for your React applications. In the process, you will also get to know about some additional hooks that were shipped with React 16.8 and also how to write your own custom React Hooks.
Lifecycle methods with the useEffect Hook (blog.logrocket.com)
Apr 08, 2020
React brought us a few different concepts, for example, the virtual DOM. It also introduced us to different libraries and new ways of solving problems that we might face in development. With this, we’re always improving our code to create more maintainable and well-written applications.
Comparing hooks libraries for GraphQL (blog.logrocket.com)
Mar 24, 2020
There are two major React Hooks libraries: graphql-hooks and apollo/react-hooks. To help you determine which library is best for your next GraphQL project, let’s compare them, examine their features, and weigh the pros and cons.
Using React Hooks in Gatsby (alligator.io)
Jan 22, 2020
Replacing Redux with React Hooks (leighhalliday.com)
Dec 18, 2019
Redux has been the go-to way to manage state within your React application for years. It's popularity is due in large part because when it was introduced, it solved a number of problems which were difficult to do in vanilla React on its own.
How to Fetch Data with React Hooks (rahmanfadhil.com)
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.
Home-baked Hooks (react.christmas)
Dec 13, 2019
About a year ago, Sophie Alpert and Dan Abramov presented one of the most exciting new features in React: Hooks.
- Nicolai August Hagen
- Markus Rauhut
Testing Custom React Hooks with Jest (newline.co)
Dec 10, 2019
Hooks in React are a new, popular, and extensible way to organize side-effects and statefulness in React components. By composing the base hooks provided by React, developers can build their own custom hooks for use by others.
A Look at the React useMemo Hook (alligator.io)
Dec 06, 2019
You may have seen, released along with React Hooks, a strange hook called useMemo. What could this strange, alien hook mean and what is it used for? Most importantly, how can it help you and why do you need to know about it?
Understanding the React useReducer Hook (alligator.io)
Nov 27, 2019
If you are at all familiar with reducers, you should have a good understanding of what React’s useReducer hook does. Plain and simple, it allows functional components in React access to reducer functions from your state management.
The React useContext Hook in a Nutshell (alligator.io)
Nov 26, 2019
Early February 2019, React introduced Hooks as a way to rewrite your components as simple, more manageable, and classless. useContext is one of the built-in Hooks, giving functional components easy access to your context.
React Global State Management with Hooks (itnext.io)
Nov 23, 2019
I was recently working on a Next.js project and wanted a few pieces of global state. I didn’t really want to go through all the setup for redux (nothing against redux, I love redux) so I decided to implement my own simple version of it using hooks.
Countdown Timer with React Hooks (alligator.io)
Nov 20, 2019
Building a countdown timer is a great way to leverage the power of React’s automatic updating of elements and can use make use of hooks to track the amount of time left on the timer.
Solutions to frustrations with React Hooks (blog.logrocket.com)
Nov 04, 2019
One of my previous posts, Frustrations with React Hooks, got an incredible amount of views and topped hacker news at one point. The post also got lots of comments, some of which have changed how I view Hooks and given me a completely new and positive way of viewing them.
How to useContext in React? (robinwieruch.de)
Oct 19, 2019
React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React but also for using React's Context in a more convenient way. This tutorial shows you how to use React's useContext Hook.
Writing a custom React hook: Google Places autocomplete (sebastiandedeyne.com)
Oct 11, 2019
I built a small React component that uses the Google Places API to autocomplete an address in a project I’m working on, and extracted the predection fetching to a custom useAddressPredictions hook. It’s a nice example of a custom React hook composed of different primisite hooks, so I decided to pen write my thought process while building it.
Popular React Hook libraries (blog.logrocket.com)
Oct 03, 2019
In this blog post, I will depict how Hooks are lifesavers. I will illustrate a couple of use cases that will feature popular React Hook libraries – both mainstream and custom (created by enthusiasts like you and me).
Thinking in React Hooks (wattenberger.com)
Sep 19, 2019
React introduced hooks one year ago, and they've been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks.
Why We Switched to React Hooks (blog.bitsrc.io)
Sep 11, 2019
Have you ever been tasked with extending a component that has a ton of branching logic, and realize that the component requires some state to make that new feature you’re adding come to life?
Getting Familiar with useEffect: Part One (moonhighway.com)
Sep 10, 2019
Rendering is the heartbeat of a React application. When something changes (props, state), the component tree re-renders, reflecting that change in the user interface. But what happens when we need to do something after a render? As you might imagine, there's a Hook for that.
State management with React Hooks (freecodecamp.org)
Sep 09, 2019
For this article, we will be working with a pattern for managing state using two very important Hooks, useContext and useReducer, to build a simple music gallery app. The application will have only two views: one for login and the other to list the songs in that gallery.
Hooked on Hooks (medium.com)
Sep 05, 2019
Using requestAnimationFrame with React Hooks (css-tricks.com)
Aug 21, 2019
Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.
Run useEffect Only Once (css-tricks.com)
Jul 30, 2019
useEffect will run when the component renders, which might be more times than you think. I feel like I've had this come up a dozen times in the past few weeks, so it seems worthy of a quick blog post.
Why React Hooks? (tylermcginnis.com)
Jul 29, 2019
The first thing you should do whenever you’re about to learn something new is ask yourself two questions - Why does this thing exist? What problems does this thing solve?
Learn React Hooks By Building An Auth Based To Do App (hackernoon.com)
May 28, 2019
The aim of this post is to provide developers with an alternative to the the other guidelines that are out there. I wouldn’t say this approach is better, but if you’re like me and you prefer to delve into building a small app that demonstrates as well as explains what you’re learning, then this one is for you.
Why I Love useReducer (hswolff.com)
May 03, 2019
I didn't realize until recently how much I loved the React Hook useReducer. It's one of those advanced hooks, and while I read the documentation about it and already have a good amount of experience with Redux, it took a little while for me to fully understand just how powerful useReducer can make your components.
useReducer vs useState in React (robinwieruch.de)
Apr 17, 2019
There are two main hooks that are used for modern state management in React: useState and useReducer. This tutorial doesn’t explain both React hooks in detail, but explains their different use case scenarios.
useRef vs useState: Should we re-render or not? (codebeast.dev)
Apr 11, 2019
Getting started with React is not the hard part, it’s understanding React’s lifecycle and how re-rendering works. With these new Hooks API’s, we have an extra layer of question marks regarding when and how reconciliation in the virtual DOM tree happens (aka re-rendering).
Using the useEffect hook (leighhalliday.com)
Mar 28, 2019
In this article we'll look at how to get an effect to run after every render, just once, or when a particular piece of data changes. We'll also look at the difference between the effect itself, and how to clean up after itself.
React Hooks: Migration from Class to Function Components (robinwieruch.de)
Mar 26, 2019
This tutorial shows a migration path on how to write React Class Components as React Function Components with React Hooks. Therefore we will go into examples on how to migrate both state management and side-effects that are used in a Class Component to be used in a Function Component.
Using React Hooks with Canvas (itnext.io)
Mar 17, 2019
In this tutorial I will use React Hooks to create an html canvas drawing website. I will start from zero using the Create React App starter kit. The resulting app offers basic features like Clear, Undo and saves drawings using localStorage.
React Hooks: How to Get Started & Build Your Own (sitepoint.com)
Mar 14, 2019
React Hooks are special functions that allow you to “hook into” React features. For example, the useState hook allows you to add React state to a functional component. useEffect is another hook that allows you to perform side effects in function components. Side effects are usually implemented using lifecycle methods. With hooks, this is no longer necessary.
Deep dive: How do React hooks really work? (netlify.com)
Mar 11, 2019
In this article, we reintroduce closures by building a tiny clone of React Hooks. This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in just 29 lines of readable JS. Finally, we arrive at how Custom Hooks naturally arise.
A Complete Guide to useEffect (overreacted.io)
Mar 10, 2019
You wrote a few components with Hooks. Maybe even a small app. You’re mostly satisfied. You’re comfortable with the API and picked up a few tricks along the way. You even made some custom Hooks to extract repetitive logic (300 lines gone!) and showed it off to your colleagues. “Great job”, they said.
Hooks, State, Closures, and useReducer (adamrackis.dev)
Mar 09, 2019
For those of us coming from a Redux background, useReducer can seem deceptively complex and unnecessary. Between useState and context, it’s easy to fall into the trap of thinking that a reducer adds unnecessary complexity for the majority of simpler use cases; however, it turns out useReducer can greatly simplify state management.
Hooks for React.js - the new ketchup? (dev.to)
Mar 02, 2019
Hooks is the latest pattern and an experimental feature that's supposedly better than sliced bread or ketchup, you decide ;). Everyone used to go nuts over Render props but now it's all hooks.
Primer on React Hooks (testdriven.io)
Feb 27, 2019
React is great, but there are some slightly aggravating architecture principles that need to be addressed while developing larger applications.
Feb 20, 2019
React 16.8 introduced hooks; a new way to work with effects and state in React. No longer do React components that have state need to be ES2015 classes that extend React.Component - hooks let us write components as functions and still have all the functionality of class based components.
React Hooks: Compound Components (kentcdodds.com)
Feb 18, 2019
How do compound components change with React hooks? A few weeks ago I did a DevTips with Kent livestream where I show you how to refactor the compound components pattern from a class component to a function component with React hooks.
A high level overview of React Hooks (reacttricks.com)
Feb 18, 2019
I started using React Hooks for my new projects and I love the simplicity of code and increased productivity. In this post I'll give you a high level overview of Hooks and how you can start using them now without having to learn everything there is to know about them.
HTTP-API Integration with React Lifecycle-Methods and Hooks (dev.to)
Feb 14, 2019
When we create a Single Page Application (SPA), we often need to integrate APIs. Sometimes third-party APIs, but at least our own back-ends to get the data we need to display. These APIs are based on the HTTP or WebSocket protocol, each having its requirements for connection setup and tear down. In this article, I explain the basic integration of HTTP APIs.
Form Validation with React Hooks (itnext.io)
Feb 14, 2019
There are several React hooks available right now and I plan to detail in some of them, but this article is about building a custom hook only using the useState hook to validate a form data.
Why I’m excited with React Hooks? (itnext.io)
Feb 11, 2019
On February 6 React 16.8 was released and with React 16.8, React Hooks are available in a stable release! That means we can start using Hooks without the fear of writing unstable code.
I used effects, said goodbye to my lifecycles, and feel 🙂 (dev.to)
Feb 11, 2019
Last week Hooks were finally added to React. It is now possible to use state in a function. At least, that much I remembered from watching the initial announcement way back when. But lifecycles though... I had no idea how they were supposed to work. I decided to read the docs and experiment.
Custom react hooks (swizec.com)
Feb 11, 2019
This is a story full of wonderful new possibilities, beautiful codey things, and components clean as the mountain air. All thanks to custom react hooks.
Rethinking the component model with Hooks (sid.studio)
Feb 08, 2019
If you’re a fan of React, you might have already heard that the release with Hooks (v16.8) is here. I’ve been playing with the alpha version for a few weeks now and I really like it. The adoption hasn’t been all rainbows and unicorns though.
Write your first React Hook! (hashnode.com)
Feb 06, 2019
In this article, we're going to review how we were managing state in React, understand why React Hooks are really a game-changer and learn to write our very first React Hook.
Intro to React Hooks (americanexpress.io)
Feb 06, 2019
This article will show you the fundamentals of programming React components using hooks. I’ll discuss the basic hooks built into React, and we’ll write a simple up/down counter component built with a custom hook.
Data Fetcher component using Hooks and Render Props (medium.com)
Jan 11, 2019
In most cases, applications that I work with just need to request data from the API and display the result. So, using a sophisticated library like Redux, only complicates the code and increases the bundle size without bringing much of a benefit.
React 16.x Roadmap (reactjs.org)
Nov 27, 2018
You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.
React Hooks (hswolff.com)
Nov 11, 2018
I definitely find React Hooks to be one of the most exciting new features that has hit React in a long time.
React hooks in a nut shell (swizec.com)
Oct 29, 2018
I watched Ryan's talk 90% cleaner with hooks last night, Dan's and Sophie's talk announcing hooks this morning, read all the docs, and watched Twitter like a hawk. Hours of research condensed into the next 200 words because I love you.