React

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,...

React Hooks and Local Storage: Let’s build a ToDo app

React Hooks and Local Storage: Let’s build a ToDo app

  • August 25, 2020

React hooks have been around for quite some time. They have been widely adopted by the React community since then and have started becoming the defacto for newer React applications. A react hook allows developers to hook into React features. React hooks allow building components by using functions instead of...

Using Emotion js in a react project

Using Emotion js in a react project

  • July 2, 2019

CSS in JS is a fairly controversial topic depending on who you talk to. What it gives you is the ability to do is write all your styling in javascript instead of creating a separate CSS file. I really like CSS in JS because it solves some of the major...

Using React.memo() in React 16.6

Using React.memo() in React 16.6

  • October 26, 2018

React 16.6 was released a couple of days and and it brings a couple of new features. One of these is React.lazy() which is something that requires a separate post in itself along with React Suspense. The other one, which we will talk about in this post is React.memo(). What...