React

Why should we not use index as key in React Lists

Why should we not use index as key in React Lists

  • January 22, 2024

When working with React, developers often come across the need to render lists of items efficiently. Every item in a list needs to have a key prop assigned to it. It is essential for enabling React to track changes made to these items. Using array indexes as these keys is...

Using Font Awesome with React

Using Font Awesome with React

  • October 22, 2022

Font Awesome is a great resource to use various types of icons in your project including well-known social media icons and a lot more. It can be used with any front-end library. In this post, we are going to be using Font Awesome with React. Set up The first step...

How to write comments in React (JSX)?

How to write comments in React (JSX)?

  • October 15, 2022

I was recently trying to comment out some logic inside my JSX to add context about what a potentially complex logic. I then realized that comments in JSX are weird. So, how to write comments in React (JSX)? You cannot use HTML comments because they are parsed as DOM nodes:...

Automatic batching in React 18 helps avoid re-rendering

Automatic batching in React 18 helps avoid re-rendering

  • January 13, 2022

Remember the earlier versions of React that used to batch multiple state updates inside event handlers such as click or change to avoid multiple re-renders? React 18 has added automatic batching for all use cases to improve that performance optimization even further. With React 18, state updates in event handlers,...

How to convert a React component to an image

How to convert a React component to an image

  • September 27, 2021

Sometimes you want to give the users the ability to download a part of the web application as an image. In that case, you want a way to convert a React component to an image. And it can be straightforward by using a third-party NPM package called html2canvas. Let us...

React fragments: What and Why

React fragments: What and Why

  • July 15, 2021

React fragments were a feature released in React 16.2. They have been around for a while now but have been a relatively lesser used feature. Let us explore the what and why the feature exists. What are React Fragments? React fragments are a syntactic addition to React that allow wrapping...

Why does React state need a new object/array?

Why does React state need a new object/array?

  • May 25, 2021

If you have been using React for a while, you are familiar with how state update works. There are a lot of internal optimizations that React makes for faster rendering. One of the implementation details of the React internals is that it checks whether the given state object has actually...