In this article, we are going to see the difference between Component and PureComponent. In ReactJS, Components are widely used to make an App more efficient and effective to use.ReactJS provides two different ways to use components – Component or PureComponent.ComponentIt is the type of component which re-renders itself every time when the props passed to it changes or its parent component re-renders.Our first component in the following example is App. This component is the parent of the Comp1 component. We are creating Comp1 separately and just adding it inside the JSX tree in our App component. Only the App ... Read More

In this article, we are going to see how to clean up the subscriptions set up in the useEffect hook in the functional component.Once the effects are created, then they are needed to be cleaned up before the component gets removed from the DOM. For this, cleaning up effect is used to remove the previous useEffect hook’s effect before using this hook of the same component again.SyntaxuseEffect(()=>{    return ()=>{} } ,[]);ExampleIn this example, we will build a React application which displays the coordinates of the mouse pointer when it is moved over the screen. For this to implement, we ... Read More

In this article, we are going to see the methods to optimize our React application.To create a real-world React application, optimized code is greatly required to enhance the performance. There are several ways to optimize a React application but some of the most preferred ways are mentioned below −MemoizationIt is the technique used to speed up the application by storing the result as the cache and only calling the function again when the inputs are changed otherwise the cached result is returned.Use React.memo() for functional components. This method is used to only re-render the component if the props passed to ... Read More

In this article, we are going to see how to set and retrieve data in the localStorage memory of the user’s browser in a React application.LocalStorage is a web storage object to store the data on the user’s computer locally, which means the stored data is saved across browser sessions and the data stored has no expiration time.Syntax// To store data localStorage.setItem('Name', 'Rahul'); // To retrieve data localStorage.getItem('Name'); // To clear a specific item localStorage.removeItem('Name'); // To clear the whole data stored in localStorage localStorage.clear();Set, retrieve and remove data in localStorageIn this example, we will build a React ... Read More

In this article, we will learn how to lazily load the pages of our application to make our React application more optimized.React apps are bundled with the preinstalled bundlers like webpack before making the React application to be production ready. When this bundled project is loaded, it loads the whole source code at once, even those pages which are rarely visited by the user. So, to prevent the entire loading of the application at once, we use the concept of lazy loading to decrease the DOM load time and to increase the speed of the application.Syntaxconst OtherComponent = React.lazy(() => ... Read More

In this article, we are going to see how to import CSS Files, images and functions defined in other folder to the main App.js file.In React, we need to dynamically import the images from their folder.ExampleIn this example, we will define a project structure with the images and components already defined in the assets and components folder and then we are going to dynamically import them in our main App.js file.Project StructureApp.jsimport React from 'react'; import MyComponent from './components/my -component.js'; import TutorialsPoint from './assets/img.png'; const App = () => {    return (           ... Read More

In this article, we are going to learn how to send and receive Http Responses with axios in a React application.Why Use axios?Automatic conversion of response to JSON formatEasy to use and more secureSetting up global HTTP interceptorsSimultaneous RequestInstalling the modulenpm install axiosORyarn add axiosNpm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.Sending GET requesthttps://jsonplaceholder.typicode.com/todos/1Jsonplaceholder is a fake API which is used to learn the process of the sending requests.ExampleApp.jsximport React, { useEffect, useState } from 'react'; const App = () => {    const [data, setData] = useState(null);    const ... Read More

In this article, we are going to see how to apply inline styling to a component in a React application.Radium is a popular third package application used to add inline styling and pseudo selectors such as :hover, :focus, :active, etc. to a JSX element.Installing the modulenpm install --save radiumORyarn add radiumNpm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.ExampleApp.jsximport Radium from 'radium'; import React from 'react'; function App() {    const style = {       ':hover': {          backgroundColor: '#000',     ... Read More

In this article, we are going to see how to update the parent state from a child component in a React application.To update the parent state from the children component, either we can use additional dependencies like Redux or we can use this simple method of passing the state of the parent to the children and handling it accordingly.ExampleIn this example, we will build a React application which takes the state and the method to update it from the parent component and pass it to the children component and after handling it we will pass the updated state to the ... Read More

In this chapter, we are going to see how to set, remove and retrieve cookies in a React application.Cookies are the data stored in the form of key-value pairs that are used to store information about the user on their computer by the websites that the users browse and use it to verify them.To set or remove the cookies, we are going to use a third-party dependency of react-cookie.Installing the modulenpm install react-cookieOr, yarn add react-cookieNpm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.Setting up cookiesIn this ... Read More