React components typically render based on props and state. But sometimes we need to interact with external systems like localStorage, APIs, or timers. These interactions are called side-effects and should be handled carefully to keep components predictable and maintainable.
To improve user experience, we want to store the latest search term in the browser so it persists after refresh or reopening:
const handleSearch = (event) => {
setSearchTerm(event.target.value);
localStorage.setItem('search', event.target.value);
};And for initializing state:
const [searchTerm, setSearchTerm] = React.useState(
localStorage.getItem('search') || 'React'
);If we only update localStorage inside the handler, other updates to searchTerm won’t sync. The solution: use useEffect to centralize the side-effect:
React.useEffect(() => {
localStorage.setItem('search', searchTerm);
}, [searchTerm]);Now, every time searchTerm changes, localStorage is updated automatically.
If the stored value is "", the || operator treats it as false and falls back to "React". To fix this, use the nullish coalescing operator ??:
const [searchTerm, setSearchTerm] = React.useState(
localStorage.getItem('search') ?? 'React'
);Using useEffect to manage side-effects makes React components more robust and predictable. By syncing state with localStorage, we preserve user data across sessions and improve the overall experience. These techniques are essential for building professional, user-friendly React applications.