useUpdateEffect

lifecycle

Installation

npx usehooks-cli@latest add use-update-effect

Description

A React hook that works like useEffect but skips the first render. Only runs the effect on subsequent updates, not on component mount.

Parameters

Name	Type	Default	Description
effect	React.EffectCallback	-	The effect function to run on updates (not on mount)
deps?	React.DependencyList	-	Array of dependencies to watch for changes

Examples

Skip Initial API Call

Only making API calls on updates, not on initial mount

const [userId, setUserId] = useState(1);
const [userData, setUserData] = useState(null);

// Regular useEffect - runs on mount and updates
useEffect(() => {
  // Initial data load
  fetchUserData(userId).then(setUserData);
}, [userId]);

// Update effect - only runs when userId changes after mount
useUpdateEffect(() => {
  // This won't run on the initial render
  console.log('User changed, updating data...');
  fetchUserData(userId).then(setUserData);
  
  // Show loading indicator for updates only
  setIsUpdating(true);
}, [userId]);

Form Validation on Changes

Validating form only after user starts making changes

const [formData, setFormData] = useState({
  email: '',
  password: '',
  confirmPassword: ''
});
const [errors, setErrors] = useState({});

// Don't validate on initial render, only when user changes form
useUpdateEffect(() => {
  const newErrors = validateForm(formData);
  setErrors(newErrors);
  
  // Show validation messages only after user interaction
  if (Object.keys(newErrors).length > 0) {
    showValidationToast('Please fix the errors');
  }
}, [formData]);

const handleInputChange = (field, value) => {
  setFormData(prev => ({ ...prev, [field]: value }));
};

Analytics Tracking

Tracking user interactions without counting initial page load

const [currentPage, setCurrentPage] = useState('home');
const [searchQuery, setSearchQuery] = useState('');
const [filters, setFilters] = useState([]);

// Track page changes (excluding initial page load)
useUpdateEffect(() => {
  analytics.track('page_changed', {
    from: previousPage,
    to: currentPage,
    timestamp: Date.now()
  });
}, [currentPage]);

// Track search behavior (excluding initial empty state)
useUpdateEffect(() => {
  if (searchQuery.trim()) {
    analytics.track('search_performed', {
      query: searchQuery,
      filters: filters,
      resultsCount: searchResults.length
    });
  }
}, [searchQuery, filters]);

// Track filter usage (excluding initial empty filters)
useUpdateEffect(() => {
  analytics.track('filters_applied', {
    filters: filters,
    count: filters.length
  });
}, [filters]);

Dependencies

react

Notes

•Skips execution on the first render (component mount)
•Useful for avoiding unwanted side effects during initial component setup
•Commonly used for analytics, validation, and update-specific logic
•Uses a ref to track whether it's the first render
•Behaves exactly like useEffect for all subsequent renders
•Cleanup function works the same as regular useEffect

Implementation

"use client";

import { useEffect, useRef } from "react";

export function useUpdateEffect(
  effect: React.EffectCallback,
  deps?: React.DependencyList
): void {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }

    return effect();
  }, deps);
}

useDeepCompareEffect

CLI Docs All Hooks

useFetch