Search⌘ K
Home
Courses
The Road to React: The One with Hooks

React Side-Effects

Explore how to handle side-effects in React by using the useEffect Hook to synchronize local storage with the search term state. Understand how this approach improves app reliability by managing side-effects outside event handlers and integrating with the React component lifecycle.

We'll cover the following...

We’ll make the Search component remember the most recent search interaction, so the application opens it in the browser whenever it restarts.

First, use the local storage of the browser to store the searchTerm accompanied by an identifier. Next, use the stored value, if a value exists, to set the initial state of the searchTerm. Otherwise, the initial state defaults to our initial state (here “React”) as before:

Node.js
const App = () => {
 ...
 const [searchTerm, setSearchTerm] = React.useState(
   
   localStorage.getItem('search') || 'React'
 );
 const handleSearch = event => {
   setSearchTerm(event.target.value);
   localStorage.setItem('search', event.target.value);
 };
 ...
);
~~

When using the input field and refreshing the browser tab, the browser should remember the latest search term. Using the local storage in React can be seen as a ...