Как говорится в руководстве,

Обработчик эффекта, useEffect, добавляет возможность выполнять побочные эффекты из функционального компонента. Он служит той же цели, что и componentDidMount, componentDidUpdate и componentWillUnmount в классах React, но объединен в единый API.

В этом примере из руководства ожидается, что count будет 0 только при первоначальном рендеринге:

const [count, setCount] = useState(0);

Так что он будет работать как componentDidUpdate с дополнительной проверкой:

useEffect(() => {
  if (count)
    document.title = `You clicked ${count} times`;
}, [count]);

В основном так может работать пользовательский хук, который можно использовать вместо useEffect:

function useDidUpdateEffect(fn, inputs) {
  const didMountRef = useRef(false);

  useEffect(() => {
    if (didMountRef.current)
      fn();
    else
      didMountRef.current = true;
  }, inputs);
}

Кредиты идут на @Tholle за предложение useRef вместо setState.

Вот настраиваемый хук, который просто предоставляет логический флаг, чтобы указать, является ли текущий рендеринг первым рендером (когда компонент был смонтирован). Это примерно то же самое, что и некоторые другие ответы, но вы можете использовать флаг в useEffect или функции рендеринга или в любом другом месте в нужном вам компоненте. Может, кто-нибудь предложит имя получше.

import { useRef, useEffect } from 'react';

export const useIsMount = () => {
  const isMountRef = useRef(true);
  useEffect(() => {
    isMountRef.current = false;
  }, []);
  return isMountRef.current;
};

Вы можете использовать это как:

import React, { useEffect } from 'react';

import { useIsMount } from './useIsMount';

const MyComponent = () => {
  const isMount = useIsMount();

  useEffect(() => {
    if (isMount) {
      console.log('First Render');
    } else {
      console.log('Subsequent Render');
    }
  });

  return isMount ? <p>First Render</p> : <p>Subsequent Render</p>;
};

А вот и тест, если вам интересно:

import { renderHook } from '@testing-library/react-hooks';

import { useIsMount } from '../useIsMount';

describe('useIsMount', () => {
  it('should be true on first render and false after', () => {
    const { result, rerender } = renderHook(() => useIsMount());
    expect(result.current).toEqual(true);
    rerender();
    expect(result.current).toEqual(false);
    rerender();
    expect(result.current).toEqual(false);
  });
});

Нашим вариантом использования было скрытие анимированных элементов, если исходные свойства указывают, что они должны быть скрыты. На более поздних рендерах, если реквизит изменился, мы хотели, чтобы элементы анимировались.

Я нашел решение, более простое и не требующее использования другого крючка, но у него есть недостатки.

useEffect(() => {
  // skip initial render
  return () => {
    // do something with dependency
  }
}, [dependency])

Это просто пример того, что есть другие способы сделать это, если ваш случай очень простой.

Недостатком этого является то, что у вас не может быть эффекта очистки и он будет выполняться только тогда, когда массив зависимостей изменится во второй раз.

Это не рекомендуется использовать, и вы должны использовать то, что говорят другие ответы, но я добавил это только здесь, чтобы люди знали, что есть несколько способов сделать это.

Редактировать:

Чтобы было понятнее, вам не следует использовать этот подход для решения проблемы в вопросе (пропуская начальную визуализацию), это только для обучающих целей, которые показывают, что вы можете делать то же самое в различные пути. Если вам нужно пропустить начальную визуализацию, используйте этот подход для других ответов.

Я использую обычную переменную состояния вместо ссылки.

// Initializing didMount as false
const [didMount, setDidMount] = useState(false)

// Setting didMount to true upon mounting
useEffect(() => { setDidMount(true) }, [])

// Now that we have a variable that tells us wether or not the component has
// mounted we can change the behavior of the other effect based on that
const [count, setCount] = useState(0)
useEffect(() => {
  if (didMount) document.title = `You clicked ${count} times`
}, [count])

Мы можем реорганизовать логику didMount как настраиваемую ловушку, подобную этой.

function useDidMount() {
  const [didMount, setDidMount] = useState(false)
  useEffect(() => { setDidMount(true) }, [])

  return didMount
}

Наконец, мы можем использовать его в нашем компоненте вот так.

const didMount = useDidMount()

const [count, setCount] = useState(0)
useEffect(() => {
  if (didMount) document.title = `You clicked ${count} times`
}, [count])

ОБНОВЛЕНИЕ Использование ловушки useRef, чтобы избежать лишнего повторного рендеринга (спасибо @TomEsterez за предложение)

На этот раз наш кастомный хук возвращает функцию, возвращающую текущее значение нашего ref. Вы тоже можете использовать ссылку напрямую, но мне это больше нравится.

function useDidMount() {
  const mountRef = useRef(false);

  useEffect(() => { mountRef.current = true }, []);

  return () => mountRef.current;
}

использование

const MyComponent = () => {
  const didMount = useDidMount();

  useEffect(() => {
    if (didMount()) // do something
    else // do something else
  })

  return (
    <div>something</div>
  );
}

Кстати, мне никогда не приходилось использовать этот хук, и, вероятно, есть более эффективные способы справиться с этим, которые больше похожи на модель программирования React.

Дружественный хук TypeScript и CRA, замените его на useEffect, этот хук работает как useEffect, но не сработает, пока выполняется первый рендеринг.

import * as React from 'react'

export const useLazyEffect:typeof React.useEffect = (cb, dep) => {
  const initializeRef = React.useRef<boolean>(false)

  React.useEffect((...args) => {
    if (initializeRef.current) {
      cb(...args)
    } else {
      initializeRef.current = true
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, dep)
}

Вот моя реализация, основанная на ответе Estus Flask, написанном на Typescript. Он также поддерживает обратный вызов очистки.

import { DependencyList, EffectCallback, useEffect, useRef } from 'react';

export function useDidUpdateEffect(
  effect: EffectCallback,
  deps?: DependencyList
) {
  // a flag to check if the component did mount (first render's passed)
  // it's unrelated to the rendering process so we don't useState here
  const didMountRef = useRef(false);

  // effect callback runs when the dependency array changes, it also runs
  // after the component mounted for the first time.
  useEffect(() => {
    // if so, mark the component as mounted and skip the first effect call
    if (!didMountRef.current) {
      didMountRef.current = true;
    } else {
      // subsequent useEffect callback invocations will execute the effect as normal
      return effect();
    }
  }, deps);
}

Живая демонстрация

Живая демонстрация ниже демонстрирует различия между хуками useEffect и useDidUpdateEffect.

Нижеприведенное решение похоже на приведенное выше, но я предпочитаю немного более чистый способ.

const [isMount, setIsMount] = useState(true);
useEffect(()=>{
        if(isMount){
            setIsMount(false);
            return;
        }
        
        //Do anything here for 2nd render onwards
}, [args])

Я собирался прокомментировать принятый на данный момент ответ, но не хватило места!

Во-первых, при использовании функциональных компонентов важно отказаться от мышления в терминах событий жизненного цикла. Подумайте об изменениях свойств / состояний. У меня была аналогичная ситуация, когда я хотел, чтобы срабатывала только конкретная useEffect функция, когда конкретная опора (parentValue в моем случае) меняет свое начальное состояние. Итак, я создал реф, основанный на его начальном значении:

const parentValueRef = useRef(parentValue);

а затем включил следующее в начало useEffect fn:

if (parentValue === parentValueRef.current) return;
parentValueRef.current = parentValue;

(Как правило, не запускайте эффект, если parentValue не изменился. Обновите ссылку, если она изменилась, готовность к следующей проверке, и продолжайте запускать эффект)

Таким образом, хотя другие предлагаемые решения решат конкретный вариант использования, который вы указали, в конечном итоге они помогут изменить то, как вы думаете о функциональных компонентах.

Думайте о них как о рендеринге компонента на основе некоторых свойств.

Если вам действительно нужно какое-то местное состояние, useState предоставит это, но не предполагайте, что ваша проблема будет решена с сохранением локального состояния.

Если у вас есть код, который изменит ваши реквизиты во время рендеринга, этот `` побочный эффект '' должен быть заключен в useEffect, но его цель - получить чистый рендеринг, на который не влияют какие-либо изменения во время рендеринга. . Хук useEffect будет запущен после завершения рендеринга и, как вы указали, он будет запускаться при каждом рендеринге - если только второй параметр не используется для предоставления списка свойств / состояний, чтобы определить, какие измененные элементы приведут к его изменению. выполнить последующие разы.

Удачи на пути к функциональным компонентам / крючкам! Иногда необходимо отучиться чему-то, чтобы освоить новый способ работы :) Это отличный учебник: https://overrected.io/a-complete-guide-to-useeffect/