useMemo is a hook in React that allows you to memoize the result of a function call and cache it, so that the function is only re-executed when its dependencies change. It is used to optimize the performance of your React components by avoiding unnecessary re-computations.
Here is an example of how to use useMemo in JavaScript:
import React, { useMemo } from 'react'; const MyComponent = () => { const expensiveCalculation = () => { // Some expensive computation here return result; }; const memoizedValue = useMemo(() => expensiveCalculation(), []); return ( <div> <p>Memoized Value: {memoizedValue}</p> </div> ); }; export default MyComponent;
In this example, expensiveCalculation is a function that performs some computationally expensive task. By wrapping it with useMemo, we ensure that the function is only executed once during the initial render of the component, and the result is cached. The empty dependency array [] indicates that there are no dependencies, so the memoized value will not be recalculated even if the component re-renders.
The memoized value can then be used within the component, in this case, it is rendered as a paragraph element. This way, if the component re-renders due to other state or prop changes, the expensive calculation will not be repeated, improving the performance of the component.
Note: The code provided above is in JavaScript format. To use it in an HTML file, you would need to include a script tag with the JavaScript code or use a bundler like Webpack to compile the code into a format that can be used in an HTML file.