Within a React or Next.js app, if you encounter the error “Hydration failed because the initial UI does not match what was rendered on the server”, there could be a few reasons for it. Let us look at all the possible reasons and potential fixes for the error. Potential issues...
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...
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...
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:...
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,...
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 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...
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...
Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.
