Skip First Render with React's useUpdateEffect Hook

What you’ll get

You will learn how to use a special React hook called useUpdateEffect to run code only after the initial loading of a component, not during it. This is useful for preventing actions like saving data or sending analytics events before a user has even interacted with the page.

This approach works because useUpdateEffect is a small modification of the standard useEffect hook, specifically designed to skip its first run.

Tools you need

• React (free): A JavaScript library for building user interfaces. You’ll need to have a React project set up.
• useUpdateEffect from @reactuses/core (free): A custom hook that behaves like useEffect but skips the first render.

Steps

1. Install the library: If you don’t have it already, you need to add the @reactuses/core library to your project. Open your project’s terminal and run:

   npm install @reactuses/core

   or if you use Yarn:

   yarn add @reactuses/core

   You should see a confirmation message that the package was installed successfully.

2. Import the hook: In your React component file, import both useState (if you’re managing state) and useUpdateEffect from their respective libraries.

   import { useState } from 'react';
   import { useUpdateEffect } from '@reactuses/core';

   You should see these import statements appear at the top of your code file.

3. Use useUpdateEffect: Replace your useEffect hook with useUpdateEffect. The syntax is identical, meaning you pass it a function and a list of dependencies (values that, when changed, should trigger the function).

   Here’s an example of how you might save settings:

   function EditorSettings({ userId }) {
     const [settings, setSettings] = useState(loadDefaults()); // Assume loadDefaults() gets initial settings
   
     useUpdateEffect(() => {
       // This code will ONLY run after the initial render, and then again if 'settings' changes.
       saveSettings(userId, settings); // Assume saveSettings() saves to a server
       toast("Settings saved ✓"); // Assume toast() shows a notification
     }, [settings]); // The effect re-runs if 'settings' changes
   
     // ... rest of your component, e.g., a form to edit settings
     return <SettingsForm value={settings} onChange={setSettings} />;
   }

   When you run your application, you will notice that the saveSettings function and the toast notification do not appear immediately when the EditorSettings component first loads. They will only appear after you make a change to the settings.

Original source

This workflow is based on an explanation by childrentime on the DEV Community platform. The author aimed to provide a simple solution for a common React development problem: preventing useEffect from running on the initial component mount.

Notes & variations

• Common mistake: If you accidentally use useEffect instead of useUpdateEffect, your effect will run on the first render, potentially causing unwanted actions like saving default settings immediately.
• Tip for better results: useUpdateEffect is perfect for actions that should only happen in response to user interaction or data changes after the component has loaded. For effects that must run on mount (like fetching initial data), stick with the standard useEffect.
• Free tier viability: Both React and the @reactuses/core library are completely free to use.