How to stop a React component from rendering
March 18, 2023 — In React, when you want don’t want a component to render based on some condition, you might reach for short-circuiting to achieve the same.
Why can not I access an updated state value in React immediately?
February 6, 2023 — Perhaps the most confusing or talked about topic in the React world is state management. And one of the most common questions that I see is why an updated state value in React can’t be accessed immediately.
Using key prop to reset React components
July 13, 2022 — Sometimes, solutions to some of the problems are much simpler than we make them to be. Working with React.js is one of those things where you may complicate things unnecessarily when you don’t know the right approach.
Natural debouncing using the useDeferredValue hook in React 18
July 7, 2022 — Oftentimes, when working with UIs, you may come across scenarios where you need to render something based on the user-entered input.
Do cleanup from useEffect in React.js whenever possible
June 28, 2022 — The useEffect hook in React.js is the one that you would be using to run side effects for a particular component.
Keeping track of the last value of state in React.js
June 21, 2022 — When working with states in React.js, there comes a time when you might need to differentiate between the current and previous “state” of a state.
Boolean toggle using useReducer hook in React.js
May 3, 2022 — Toggles are an integral part of a web application. Toggles usually have two states. Most of the time these would be of type boolean.
Effectively rendering lists in React.js
April 27, 2022 — When you’re working on the frontend side of the things of a website, one of the most common tasks is to render lists from arrays/objects.
Using value of state variables right after updating in React.js
March 10, 2022 — Working on one of the apps which built on top of React.js, I stumbled upon a scenario where I needed to use the value of a state variable immediately after it’s updated.
Curried event handlers in React.js
March 7, 2022 — When working with React.js components, you might end up in a situation where you would be using an event handler more than once.
Auto assigning unique key to each child of a list in React
February 21, 2022 — If you have ever worked with lists in React, you might have rendered it using the Array.prototype.map() method like so.
Always destructure your component props in React.js
September 28, 2021 — While working with React.js components, there are two ways using which you can retrieve/access the component props.
Graceful error handling using Error Boundaries in React.js
September 12, 2021 — Working with React.js, it’s a common thing you would see where if something goes wrong, (for instance, a JavaScript error), the entire React.js app would crash instantly and renders blank.
Why choose React Native for your business?
August 20, 2021 — No matter what field your business is in, having a mobile application to improve your customer’s engagement and experience helps it immensely.
Avoid relative import paths in React.js using Webpack aliases
August 18, 2021 — Here’s a little tip for your React.js projects that can dramatically improve your developer experience.
The new startTransition API to offset expensive renders in React 18
June 15, 2021 — The latest major version of React.js, 18, is around the corner and it will include out-of-the-box improvements (like automatic batching), new APIs (like startTransition), and a new streaming server renderer with built-in support for React.lazy.
Supercharged and clutter-free data fetching using React Query
May 17, 2021 — When working on enterprise applications, it’s often the use-case to fetch data from the server from the frontend. This involves fetching data asynchronously and rendering it to the frontend when the data is fetched successfully or render the error message if something goes wrong during this entire process.
How to specify default value for props in React.js
Update state of component from other components using React hooks
Select React element type using general expressions
May 6, 2020 — The usual way of using a React element is to first import it and then utilize it inside of an another React component like so.
Type checking props using PropTypes in React
December 23, 2019 — JavaScript is not a statically typed language. A language is a statically typed if the type of a variable is known at compile-time instead of at run-time. Common examples of statically-typed languages include Java, C, C++, Swift, Kotlin and Scala.
Automatically bind ES6 class functions in callbacks in React
December 22, 2019 — When using React component using ES6 classes, you must have encountered this phenomenon where you have to explicitly bind the class function and then pass it to the even such as onClick. For instance, take the following example.
