This React pattern optimizes performance in functional components by preventing unnecessary re-renders using the useMemo and useCallback hooks. It is ...
Back to Snippets
javascript
• 23 lines
JavaScript
JavaScript
JavaScript
Optimizing React Performance With Context API And useMemo
This React code snippet utilizes the Context API along with the useMemo hook to optimize performance by sharing data between components efficiently. It is particularly useful in scenarios where manual prop passing is cumbersome. By leveraging useMemo, unnecessary re-renders are prevented, thus ensuring smooth data sharing and minimizing performance issues. This approach is beneficial for complex component trees where data needs to be accessed globally.
Snippet Stats
Lines
23
Characters
557
Read
1 min
import React, { createContext, useState, useMemo } from 'react';
/**
* @param {object} props - The component props
* @param {object} props.children - The child components
* @return {JSX.Element} The context provider
* @throws {Error} If the context is not provided
*/
const DataContext = createContext();
const DataProvider = ({ children }) => {
const [data, setData] = useState({});
const contextValue = useMemo(() => ({ data, setData }), [data, setData]);
return (
<DataContext.Provider value={contextValue}>
{children}
</DataContext.Provider>
);
};
export default DataProvider;Found an issue with this snippet? Help us improve by reporting it. Report it →
Related Snippets
View allThis code snippet demonstrates how to optimize React hooks using useCallback and useMemo to prevent unnecessary re-renders and improve performance. It...
This React hook handles asynchronous data fetching with error handling and loading states, making it useful for fetching data from APIs. It utilizes R...