This content originally appeared on DEV Community and was authored by Manu Kumar Pal
Hey community! 
how to optimize like a pro with Memoization, Suspense, and more. 
1. React.memo – Stop Unnecessary Re-Renders
By default, React re-renders a component when its parent updates—even if props didn’t change.
Fix it: Wrap your component in React.memo.
const Button = React.memo(({ label }) => {
console.log('Rendered!');
return <button>{label}</button>;
});
Only re-renders when label changes.
2. useCallback – Stable Functions Across Renders
Passing inline functions as props? It causes re-renders.
Fix it: Memoize your functions with useCallback.
const handleClick = useCallback(() => {
console.log('Clicked!');
}, []);
Great for event handlers in child components.
3. useMemo – Cache Expensive Computations
If you compute heavy values on every render, use useMemo to cache the result.
const sortedData = useMemo(() => {
return data.sort((a, b) => a.value - b.value);
}, [data]);
Only recalculates when data changes.
4. Suspense – Smarter Loading States
Instead of conditional rendering everywhere, use React Suspense with React.lazy.
const Profile = React.lazy(() => import('./Profile'));
<Suspense fallback={<div>Loading...</div>}>
<Profile />
</Suspense>
Handles lazy-loaded components gracefully.
5. Code Splitting – Load Only What You Need
Big bundle? Split it into chunks using dynamic imports or tools like Webpack.
const Settings = React.lazy(() => import('./Settings'));
Reduces initial load time.
Bonus: Profiler & DevTools
Use React Profiler to identify slow components.
Chrome DevTools → Components tab → Profiler
What’s your go-to React optimization trick? Drop it below! 
This content originally appeared on DEV Community and was authored by Manu Kumar Pal