React is incredibly fast, but as your application grows, you might notice things slowing down a bit.
In my eight years of building React applications, I have often seen developers struggle with unnecessary re-renders that eat up performance.
The good news is that React gives us several built-in ways to control exactly when a component should, and should not, update.
In this tutorial, I will show you exactly how to prevent a component from rendering in React using real-world scenarios you’ll encounter in professional development.
Prevent a Component from Rendering
By default, when a parent component re-renders, all of its children re-render as well.
This is usually fine for small apps, but imagine a complex dashboard tracking real-time stock prices on the New York Stock Exchange.
If the header re-renders every time a stock price changes, your app will feel sluggish and unresponsive.
I have found that optimizing these renders is the difference between a mediocre app and a high-performance professional product.
Method 1: Use React.memo for Functional Components
The most common way I prevent unnecessary renders is by using React.memo.
It is a higher-order component that memos your component, meaning React will skip rendering it if the props haven’t changed.
Let’s look at an example involving a Sales Tax Calculator for different US states.
import React, { useState } from 'react';
// This component will only re-render if the 'taxRate' prop changes
const TaxDisplay = React.memo(({ stateName, taxRate }) => {
console.log(`Rendering TaxDisplay for ${stateName}`);
return (
<div style={{ marginTop: '20px', padding: '10px', border: '1px solid #ccc' }}>
<h3>State: {stateName}</h3>
<p>Current Sales Tax: {taxRate}%</p>
</div>
);
});
const SalesTaxApp = () => {
const [count, setCount] = useState(0);
const [stateData] = useState({ name: 'California', rate: 7.25 });
return (
<div style={{ padding: '40px' }}>
<h1>US State Tax Monitor</h1>
<p>Background Updates: {count}</p>
<button onClick={() => setCount(count + 1)}>
Trigger App Refresh
</button>
<TaxDisplay stateName={stateData.name} taxRate={stateData.rate} />
<p style={{ fontSize: '12px', color: '#666' }}>
Notice: The TaxDisplay component does not re-render when you click the button
because its props remain the same.
</p>
</div>
);
};
export default SalesTaxApp;I executed the above example code and added the screenshot below.
In this code, clicking the “Trigger App Refresh” button updates the state of the parent.
However, since TaxDisplay is wrapped in React.memo, React checks the props. Since the state name and rate haven’t changed, it skips the render.
Method 2: Return Null to Prevent Mounting
Sometimes, you don’t just want to skip an update; you want to prevent the component from showing up at all based on a condition.
In my experience, returning null is the cleanest way to handle components that should be hidden based on user permissions or logic.
Let’s use a “Premium Membership” banner that only shows for users outside of a specific trial period.
import React, { useState } from 'react';
const PremiumBanner = ({ isPremiumUser, daysLeft }) => {
// If the user is already premium, we return null to prevent rendering anything
if (isPremiumUser) {
return null;
}
return (
<div style={{ backgroundColor: '#ffcc00', padding: '15px', textAlign: 'center' }}>
<strong>Upgrade Now!</strong> Your free trial expires in {daysLeft} days.
Limited time offer for US residents!
</div>
);
};
const UserDashboard = () => {
const [isPremium, setIsPremium] = useState(false);
return (
<div style={{ padding: '20px' }}>
<PremiumBanner isPremiumUser={isPremium} daysLeft={5} />
<h2>Welcome to your Dashboard</h2>
<button onClick={() => setIsPremium(!isPremium)}>
{isPremium ? 'Downgrade to Basic' : 'Simulate Premium Upgrade'}
</button>
<p>
When you upgrade, the PremiumBanner component returns null and
vanishes from the DOM entirely.
</p>
</div>
);
};
export default UserDashboard;I executed the above example code and added the screenshot below.
When isPremium becomes true, the PremiumBanner component returns null. React recognizes this and effectively prevents the component from rendering any HTML to the screen.
Method 3: Prevent Rendering with useMemo
Often, we have expensive calculations, like processing thousands of rows of US Census data, inside a component.
If the component re-renders for an unrelated reason, that calculation runs again. I use useMemo to stop this.
import React, { useState, useMemo } from 'react';
const CensusDataProcessor = () => {
const [theme, setTheme] = useState('light');
const [region, setRegion] = useState('Northeast');
// This function simulates a very heavy calculation
const processData = (selectedRegion) => {
console.log("Processing heavy census data...");
// Imagine filtering millions of records here
return `Analysis for ${selectedRegion} completed.`;
};
// useMemo prevents this calculation from running unless 'region' changes
const memoizedData = useMemo(() => processData(region), [region]);
return (
<div style={{
backgroundColor: theme === 'light' ? '#fff' : '#333',
color: theme === 'light' ? '#000' : '#fff',
padding: '30px'
}}>
<h1>US Census Data Lab</h1>
<select onChange={(e) => setRegion(e.target.value)}>
<option value="Northeast">Northeast</option>
<option value="Midwest">Midwest</option>
<option value="South">South</option>
<option value="West">West</option>
</select>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle {theme === 'light' ? 'Dark' : 'Light'} Mode
</button>
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>
{memoizedData}
</div>
<p>
Changing the theme re-renders the component, but the "Processing..."
log won't appear because the memoized data hasn't changed.
</p>
</div>
);
};
export default CensusDataProcessor;I executed the above example code and added the screenshot below.
By using useMemo, I ensure the heavy data processing only happens when the region state changes, not when the user toggles the UI theme.
Method 4: Implement shouldComponentUpdate in Class Components
While most of my modern work is with Hooks, I still encounter many enterprise-level American banking systems that use Class Components.
In these cases, the shouldComponentUpdate lifecycle method is your best friend.
It allows you to manually compare old and new props/state and return a boolean.
import React, { Component } from 'react';
class StockTicker extends Component {
shouldComponentUpdate(nextProps) {
// Only re-render if the stock price has changed significantly (more than $1)
// This prevents jitter and unnecessary renders for micro-fluctuations
return Math.abs(nextProps.price - this.props.price) > 1;
}
render() {
console.log(`Rendering Ticker for ${this.props.symbol}`);
return (
<div style={{ borderBottom: '1px solid #eee', padding: '10px' }}>
<strong>{this.props.symbol}</strong>: ${this.props.price.toFixed(2)}
</div>
);
}
}
class MarketWatch extends Component {
constructor(props) {
super(props);
this.state = {
price: 150.00,
lastUpdated: new Date().toLocaleTimeString()
};
}
updatePrice = (amount) => {
this.setState({
price: this.state.price + amount,
lastUpdated: new Date().toLocaleTimeString()
});
}
render() {
return (
<div style={{ padding: '30px' }}>
<h2>Wall Street Live Ticker</h2>
<p>Last Ping: {this.state.lastUpdated}</p>
<StockTicker symbol="AAPL" price={this.state.price} />
<div style={{ marginTop: '20px' }}>
<button onClick={() => this.updatePrice(0.05)}>Add $0.05 (No Render)</button>
<button onClick={() => this.updatePrice(1.50)}>Add $1.50 (Triggers Render)</button>
</div>
</div>
);
}
}
export default MarketWatch;In this example, the StockTicker only renders when the price moves by more than a dollar. Small fluctuations update the state of the parent, but the child remains static to save resources.
Best Practices for Rendering Control
Throughout my career, I have learned that you shouldn’t wrap every single component in React.memo.
Comparison of props has its own cost. If a component is simple and renders fast, the comparison might be slower than the render itself.
I always recommend measuring your app performance with React DevTools before optimizing.
Look for “long tasks” or components that re-render many times in a few seconds. Those are your targets.
Common mistakes include passing new object literals or anonymous functions as props, which breaks React.memo because the reference changes on every render.
Using useCallback for functions and useMemo for objects before passing them to memoized children is a technique I use daily.
Controlling renders is an essential skill for any React developer looking to build professional, production-ready applications.
I have found that starting with a simple architecture and adding these optimizations only where needed is the best approach.
I hope this guide helps you build faster, more efficient React applications for your users.
You may also read:
- React Hide Component Without Unmounting
- How to Build a React Image Slider Component
- React Error Handling in Functional Components
- React App Component Structure Best Practices
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
