reactjs

Using the useCallback React hook

Using the useCallback React hook

  • January 28, 2021

The useCallback React hook is a useful hook that can help in optimizing the rendering performance of our functional React components. It is used to memoize functions which means it caches the return value of a function given a set of input parameters. The syntax As we can see, the...

Understanding the useRef React hook

Understanding the useRef React hook

  • January 21, 2021

Continuing our React hooks series, we will learn about the useRef React hook in this blog post. The useRef React hook is useful in the following two situations: Before we see these advantages of the hook, let us first understand what the hook is and what it does. What is...

Use redux-like middleware for useReducer in React

Use redux-like middleware for useReducer in React

  • January 14, 2021

If you have used Redux before, you would be aware of the concept of middlewares. Now that useReducer has become a commonly used react hook, we might want to replicate the idea of middleware for the useReducer hook as well. If you do not know about middlewares, middlewares are functions...

How to write your own custom React hooks

How to write your own custom React hooks

  • January 12, 2021

If you have been using react for a while, chances are you have come across the need to extract some logic into a reusable function. And with React hooks coming into the picture, doing this has become a walk in the park. We can write our own custom react hooks...

Provide callback to useState hook like setState

Provide callback to useState hook like setState

  • December 15, 2020

If you have been writing class components for a while, you might be familiar with the callback functionality that the setState function provides. setState allows a second parameter to be passed to it as a callback. The callback function is invoked whenever the state of the function gets updated. But,...

Detecting click outside component using React hooks

Detecting click outside component using React hooks

  • November 10, 2020

If you have tried developing your own dropdown, modal, or popover in React, you would have come across this. “How do I detect a click outside my react component so that I can close it?” Detecting click outside component is luckily is not that difficult. This post will use react...

Learning context API and the useContext React hook

Learning context API and the useContext React hook

  • September 15, 2020

In this react hooks series, we have already explored the react hooks useState, useEffect, and useReducer. The next react hook we will look into is the useContext hook. As we saw while building our sample application, we had to lift the state up to our root component in order to...

Understanding the useReducer hook in React

Understanding the useReducer hook in React

  • September 1, 2020

Building upon our React hooks introduction from our previous post on understanding React hooks (useState and useEffect), we will look at the useReducer hook in this post. useReducer hook can be an alternative to useState (in fact, useState uses useReducer internally). Before getting into how to use the useReducer hook,...