In this article, we are going to see how to highlight potential problems that we might have in a React Application.React.StrictMode is a helper functionality provided by React which allows us to write better React codes. It provides visual feedback in the form of warnings if we don’t follow the React guidelines, but it works only in the development mode.Note: They are unsafe to use while using async await.Use-cases of Strict Mode −Identifying components with unsafe lifecyclesWarning about legacy string ref API usageWarning about deprecated findDOMNode usageDetecting unexpected side effectsDetecting legacy context APIWe can also bind React.StrictMode to work only ... Read More

In this article, we are going to learn how to send and receive Http Responses in a React application.To send or receive data, we don’t need to use third-party packages, rather we can use the fetch() method which is now supported by all the modern browsers.Sending GET requesthttps://jsonplaceholder.typicode.com/todos/1Jsonplaceholder is a fake API which is used to learn the process of sending requests.Exampleindex.jsximport React from "react"; import ReactDOM from "react-dom"; import { CookiesProvider } from "react-cookie"; import App from "./App"; ReactDOM.render(              ,    document.getElementById('root') );App.jsximport React, { useEffect, useState } from 'react'; const ... Read More

In this article, we are going to see how to handle the strings with RegEx handling in a React application.A RegEx or Regular Expression is a sequence of characters that forms a search pattern and is used to check if a string contains a specified search pattern or not. It is also used to validate strings which consist of email, passwords etc.Syntaxnew RegExp(pattern[, flags])ExampleIn this example, we will build an authentication React application that takes an email and password from the user and checks if they are validated or not.We have Regex.js which contains all the regular expressions to validate ... Read More

In this article, we are going to see how to use the useState hook in a functional component.State is the place where the data comes from. We should always try to make our state as simple as possible. With React 16.8, hooks are released which allow us to handle the state with less coding.Syntaxconst [state, setState] = useState(initialstate)It accepts two parameters – state and setState. State is the current state, while setState is used to change the state of the functional component.On every state change, the component re-renders with the updated state.ExampleIn this example, we will build a React application ... Read More

In this article, we are going to see how to create a reference to any DOM element in a functional component.This hook is used to access any DOM element in a component and it returns a mutable ref object which will be persisted as long as the component is placed in the DOM.If we pass a ref object to any DOM element, then the .current property to the corresponding DOM node elements will be added whenever the node changes.Syntaxconst refContainer = useRef(initialValue);ExampleIn this example, we will build a React application that passes the ref object to two input fields.When clicked ... Read More

This hook is a better alternative of the useState hook, as it is used when we want to attach a function along with handling the state or when we want to handle the state based on the previous values.Syntaxconst [state, dispatch] = useReducer(reducer, initialArgs, init);ParametersReducer − The function to handle or update the stateinitialArgs − Iitial stateInit − To load the state lazily or when it is requiredExampleIn this example, we will build a simple calculator using the useReducer hook which takes the input from the user and displays the result accordingly.App.jsximport React, { useReducer } from 'react'; const ... Read More

In this article, we are going to see how to optimize a React application by passing a memoized value.This hook is used to optimize the React application by returning a memoized value which helps to prevent doing the complex calculations on every re-rendering. This hook stores the cached value and only updates the function on certain defined conditions.Note: Don’t call side-effects in useMemo hooks; use useEffect hook instead.Syntaxconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);Here, the returned value of computeExpensiveValue() function will only be changed on the next re-render if the values of a or b change.Without useMemo HookExampleIn ... Read More

In this article, we are going to see how to set up side-effects or HTTP requests in a functional component.This hook has the similar functioning like that of useEffect hooks but rather than being called out asynchronously, it has a synchronous effect. This hook is used to load the data in the DOM synchronously and also works in the same phase like that of useEffect hook.Note: Use useLayoutEffect hook only if useEffect hooks don't give the expected output.SyntaxuseLayoutEffect()ExampleIn this example, we will build a React application that displays and updates the name synchronously.App.jsximport React, { useLayoutEffect, useState } from 'react'; ... Read More

In this article, we are going to see how to customize the instance value of the ref object.Both useImperativeHandle and useRef hook allows to pass the ref object but the latter one doesn’t allow to customize the instances that are also passed with the ref object. useImperativeHandle hooks is different from the useRef hook in majorly two ways −It allows handling and customizing the returned value explicitly.It allows you to replace the native instances of the ref object with the user-defined ones.SyntaxuseImperativeHandle(ref, createHandle, [deps])ExampleIn this example, we are going to build a custom Button Component that has a user-defined instance attached ... Read More

In this article, we are going to see how to set up side-effects or HTTP requests in a functional component.This hook is used to set up subscriptions, handle side-effects or to send analytics data to the server. It is the combination of componentDidMount, componentDidUpdate and componentWillUnmount methods of class-based components. The function passed to this hook will run only after the component is rendered.SyntaxuseEffect(()=>{}, []);()=>{} − Function passed to this hook[ ] − It tells the hook when to re-render the component. For example −[props] − If props values are changed then this hook is called again.[ ] − This ... Read More