1. Introduction In this tutorial, we’ll discuss the useMemo hook which plays important role in performance optimization of the application. The React useMemo hook lets you cache the result of a calculation between re-renders. You call useMemo at the top level of your component to cache a calculation value between re-rendering of the component. 2.…

1. Introduction React takes advantages of purity of components. A component in React should be written as Pure component. In this short tutorial, we’ll discuss what is a pure component with an example. Before discussing pure component, let us discuss a pure function. 2. What is a pure function? A pure function is a concept…

1. Introduction You will often want to show multiple similar components from a collection of data. You can use JavaScript array methods combined with filter() and map() to filter and transform array data to components. 2. Rendering data from arrays Suppose you have a list of fruits. This is a simple example of list of…

1. Introduction You will often need to display different things on the screen based on some condition. In React, you can conditionally render JSX using JavaScript like syntax like if statements, ?: operators and &&. In React, control flow is handled by JavaScript. 2. Example In this example, you can observe that a different JSX…

1. Introduction useId is a React Hook for generating unique IDs that can be passed to accessibility attributes. useId() does not take any parameter and returns a unique ID string associated with this particular useId call in this particular component. Let us understand the usage of useId with the help of an example. HTML accessibility…

1. Introduction useEffect is a React Hook which allows you to synchronize your component with an external system. Here, external system means any piece of code that’s not controlled by React, such as: 2. Signature useEffect has two parameters, setup and dependencies and returns undefined. React calls setup and cleanup code multiple times based on…

1. Introduction In React, the useState hook is a fundamental tool for managing state in functional components. It allows you to add state to your functional components without converting them into class components. useState hook enables you to declare state variables and update them within functional components. Here, state and count are state variables. Call…

1. Introduction In a React application we often have to use images. In this tutorial, we’ll see how to add and display images in React application. 2. Adding images from file location Suppose the images are stored in the src > images folder. An image can be imported in the component and used in the…

1. Introduction In this tutorial, we’ll discuss two of the main building block of an application – components and props. Component is an independent, reusable piece of which the UI is made. Components make it possible to break down the UI of your application into smaller reusable components. A component can be written as a…

1. Introduction Bootstrap is one of the most popular frontend toolkit for developing responsive, mobile-first front-end projects. In this tutorial, we’ll discuss two ways to install Bootstrap in a React project. Using CDN Install Bootstrap in your Node.js powered apps with the npm package. 2. Using CDN In this way of installing Bootstrap, you just…