How to persist values between Re-Renders using React useRef()
When working with React, managing state and ensuring values persist between re-renders can be crucial. One powerful tool in our arsenal is the useRef() hook. In this blog post, we’ll...
Tagged: React Hooks
Common Beginner Mistakes with React Hooks
Ready to dive into the world of React hooks? Buckle up, as we’re about to uncover some common trip-ups that many beginners encounter with these nifty little hooks. As you...
Understanding useMemo and useCallback in React
React is an amazing library for building user interfaces, but as your app grows, you might find yourself dealing with performance optimization challenges. Two key hooks, useMemo and useCallback, come...
How to set the document title in React
In a webpage, the <title> element is used to specify the title of a document. The text that is specified within the <title> tags is displayed in the title bar...
Safely setState on a Mounted React Component through the useEffect Hook
In React, when updating the state of a component after it has been unmounted, it can cause a memory leak and lead to unexpected behavior. To avoid this issue, it’s...
How to use React.memo() to not re-render when a new element is added to the component
React.memo() is a higher-order component that can be used to memoize functional components to prevent unnecessary re-renders. When the props of the component being memoized change, React.memo will compare the...
How to export multiple functions from a React hook
In React, we often use hooks to manage stateful logic in our components. Sometimes, we may want to export multiple functions from a single hook, so that they can be...
Add Instagram like stories in React
Today, we’ll show you how to add Instagram like stories in React. Here, we will create an example where we will design a React component similar to Instagram Stories. It...
Add presets to Date Range Picker in React
In this article, we’ll show you how to add presets to Date Range Picker in React. This example will help you to provide quick buttons in the picker to select...
Validate dynamic array form in React using React Hook Form
Today, we’ll show you how to validate a dynamic array form in React using React Hook Form. Refer to the following article, if you don’t know how to create a...
How to toggle the sidebar with an icon in React
In this article, we will show you how to toggle the sidebar component using Hooks in React. You may need to create a structure for your React application where you...
Redux toolkit with async API call using createAsyncThunk
In this redux toolkit article, we will show you how to create an async API call using createAsyncThunk action. In this example we will use Axios package for API call....
How to set up and use Redux Toolkit with React-Redux
Today, we will show you how to set up and use Redux Toolkit with React-Redux. You can improve your Redux code by using Redux Toolkit. Redux Toolkit allows us to...
Login form example with API using React Hooks
In this article, we will show you how to create a simple login form example with API using React Hooks. We created a similar example using react class component but...