Found 90 Articles for ReactJS

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

In this article, we are going to see how to debug the custom hooks with the useDebugValue hook in ReactJS.This hook provides custom labels to custom hooks so as to make the process of debugging easier and efficient. It is only called when the React Developer tools are toggled on.SyntaxuseDebugValue(value, ()=>{})ParametersValue − Label for the custom hook.()=>{} − Function to format the label.ExampleIn this example, we will build a React application that displays a custom label for the custom hook of our React application.App.jsxfunction useCustomHook(val) {    const [value, setValue] = useState(null);    useDebugValue(value ? Not Empty : Empty);   ... Read More

In this article, we are going to see how to access the data without passing it through every parent component in the React Lifecycle.This hook is the better replacement of the Context API of the Class-based component which is used to set the global data and this data can now be accessed in any of the children components without the need to pass it through every parent Component.Syntaxconst authContext = useContext(initialValue);The useContext accepts the value provided by React.createContext and then re-render the component whenever its value changes but you can still optimize its performance by using memoization.ExampleIn this example, we ... Read More

In this article, we are going to see how to optimize a React application by passing a memoized function.This hook is used to optimize a React application by returning a memoized function which helps to prevent unnecessary re-rendering of a function. This hook stores the cached value of the function and only updates the function if the passed dependencies changes.Syntaxconst memoizedCallback = useCallback(() => {doSomething(a, b); }, [a, b], );Here, doSomething() function will only be called again on the next re-render if the values of a or b changes; otherwise only the cached version of the function is passed.Note: useCallback(fn, ... Read More

In this article, we are going to see how to increase the performance of React application by rerendering the component only when the props passed to it changes or on when certain conditions are met.This method is majorly used to take an exit from the complex React lifecycle, but using it extensively may lead to bugs in the application.SyntaxshouldComponentUpdate(nextProps, nextState)By default, the return value of this method is true; but if it returns false, then the render(), componentWillUpdate() and componentDidUpdate() methods are not called.Example 1In this example, we will build a React application with components only getting re-rendered if the ... Read More

In this article, we are going to see how to execute a function after the component is updated and before rendering it to the DOM.This method is called before the rendering of the component and after it is updated. This method is majorly used to compare the previous state or the previous props of the component with the new state or the new received props. The value returned by this method is passed as an argument to the componentDidUpdate method.SyntaxgetSnapshotBeforeUpdate(prevProps, prevState)ParametersprevProps − Previous props passed to componentprevState − Previous state of componentExampleIn this example, we will build a React application which ... Read More

In this article, we are going to see how to execute a function before the component is rendered.This method is called before the rendering or before any updation of the component. This method is majorly used to update the state, before the rendering of the component, which depends upon the props received by the component. This method is called on every rerendering of the component.Syntaxstatic getDerivedStateFromProps(props, state)Parametersprops − Props passed to componentstate − Previous state of componentExampleIn this example, we will build a React application which will fetch the list of users and on clicking the 'fetch user' button, the ... Read More

In this article, we are going to see how to execute a function if some error occurs in the component.This method is called when a component encounters some error during the React Component Lifecycle. This method allows us to handle the error boundaries of the application. To avoid performance issues, don’t set up any side-effects in this method.Syntaxstatic getDerivedStateFromError(error)It accepts the error as a parameter that was thrown as a component.ExampleIn this example, we will build a React application that displays the contained Comp1 component if no error occurs; otherwise it displays some text. But here, in Comp1 component, error ... Read More