React.js Hook useEffect

Question

Cześć, mam pytanie odnośnie hooka useEffect w react. Rozumiem uruchamia się zawsze gdy zmienimy stan w wartości w której przekażemy do tablicy która jest drugim argumentem funkcji, Oraz że gdy tablica jest pusta to wykonuje się tylko raz przy pierwszym renderze. I teraz moje pytanie czy jest możliwość aby ten hook nie wykonał się przy pierwszym renderze strony tylko dopiero przy zmienię wartości elementu przekazanego do tablicy?

Z góry dzięki za odpowiedź!

Answer 1

Nie ma do tego specjalnego hooka. Możesz doinstalować paczkę, która daje bardziej intuicyjne hooki. Możesz też po prostu sprawdzić, czy efekt został już raz uruchomiony i jeśli nie, to po prostu robisz return. Ja używam takiego helpera:

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

function useDidChanged(effect: EffectCallback, deps?: DependencyList) {
  const isMounted = useRef(false)

  useEffect(() => {
    if (!isMounted.current) {
      isMounted.current = true
      return
    }

    effect()
  }, deps)
}

 

Comments

Wydaje mi się że funkcja effect powinna być dodana do tablicy zależności ;) 
 

  useEffect(() => {
    if (!isMounted.current) {
      isMounted.current = true
      return
    }
    effect()
  }, [effect, ...deps])

Jednak mnie zastanawia po co robić takiego hooka? Jeszcze nigdy nie miałem potrzeby użycia takiej konstrukcji a pisze z React już 3 lata zanim jeszcze weszły hooki. Zastanawiam się czy czegoś nie robię źle :/ ?