Effect’e İhtiyacımız Olmayabilir

Gereksiz Effectlerden nasıl kaçılır?

• En sık yapıldığını düşündüğüm Render için datayı değiştirmek. Mesela, bir listeyi görüntülemeden önce filtrelemek istiyorsunuz diyelim. Liste değiştiğinde bir state değişkenini güncelleyen bir Efekt yazmak isteyebilirsiniz. Ancak bu verimsizdir. Bileşeninizin state’ini güncellediğinizde Reacti ekranda ne olması gerektiğini hesaplamak için önce komponent fonksiyonlarınızı çağırır. Ardından React, ekranı güncelleyerek bu değişiklikleri DOM’a işleyecektir. Sonra Effectlerinizi çalıştıracaktır. Eğer Effect’iniz ayrıca durumu tekrar güncellerse, bu tüm süreci yeniden başlatır. Gereksiz renderlardan kaçınmak için bileşenlerinizin en üst düzeyindeki tüm verileri güncelleyin. Bu kod, proplar veya state’iniz değiştiğinde otomatik olarak yeniden çalışacaktır.

• Kullanıcı eventlerini çalıştırmak için Effectlere ihtiyacınız yok. Örneğin, bir /api/buy POST isteği göndermek ve kullanıcı bir ürün satın aldığında bir bildirim göstermek istediğinizi varsayalım. Satın Al düğmesine tıklayın event handlerda, tam olarak ne olduğunu bilirsiniz. Ama bir Efekt çalıştığında, kullanıcının ne yaptığını (örneğin, hangi düğmenin tıklandığını) bilemezsiniz. Bu nedenle, kullanıcı olaylarını genellikle karşılık gelen event handlerlarda işleyeceksiniz.

• Harici sistemlerle senkronize etmek için Effects'e ihtiyacınız var. Örneğin, bir jQuery widgetını React state’i ile senkronize halde tutan bir Effect yazabilirsiniz. Efektler ile de veri çekebilirsiniz: örneğin, arama sonuçlarını mevcut arama sorgusuyla senkronize edebilirsiniz. Modern çerçevelerin, doğrudan bileşenlerinize Efektler yazmaktan daha verimli yerleşik veri çekme mekanizmaları sunduğunu unutmayın.

Props ya da State’e Bağlı Olarak State Güncelleme

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');

  // 🔴 Avoid: redundant state and unnecessary Effect
  const [fullName, setFullName] = useState('');
  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);
  // ...
}

Pahalı Hesaplama İşlemlerini Cache’leme

function TodoList({ todos, filter }) {
  const [newTodo, setNewTodo] = useState('');

  // 🔴 Avoid: redundant state and unnecessary Effect
  const [visibleTodos, setVisibleTodos] = useState([]);
  useEffect(() => {
    setVisibleTodos(getFilteredTodos(todos, filter));
  }, [todos, filter]);

  // ...
}

console.time('filter array');
const visibleTodos = getFilteredTodos(todos, filter);
console.timeEnd('filter array');

console.time('filter array');
const visibleTodos = useMemo(() => {
  return getFilteredTodos(todos, filter); // Skipped if todos and filter haven't changed
}, [todos, filter]);
console.timeEnd('filter array');

Prop değiştiğinde tüm state’i sıfırlamak

export default function ProfilePage({ userId }) {
  const [comment, setComment] = useState('');

  // 🔴 Avoid: Resetting state on prop change in an Effect
  useEffect(() => {
    setComment('');
  }, [userId]);
  // ...
}

Prop değiştiğinde state’i değiştirmek

function List({ items }) {
  const [isReverse, setIsReverse] = useState(false);
  const [selection, setSelection] = useState(null);

  // 🔴 Avoid: Adjusting state on prop change in an Effect
  useEffect(() => {
    setSelection(null);
  }, [items]);
  // ...
}

Event Handlerlar arasında akışı paylaşma

function ProductPage({ product, addToCart }) {
  // 🔴 Avoid: Event-specific logic inside an Effect
  useEffect(() => {
    if (product.isInCart) {
      showNotification(`Added ${product.name} to the shopping cart!`);
    }
  }, [product]);

  function handleBuyClick() {
    addToCart(product);
  }

  function handleCheckoutClick() {
    addToCart(product);
    navigateTo('/checkout');
  }
  // ...
}

Post isteği göndermek

function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  // ✅ Good: This logic should run because the component was displayed
  useEffect(() => {
    post('/analytics/event', { eventName: 'visit_form' });
  }, []);

  // 🔴 Avoid: Event-specific logic inside an Effect
  const [jsonToSubmit, setJsonToSubmit] = useState(null);
  useEffect(() => {
    if (jsonToSubmit !== null) {
      post('/api/register', jsonToSubmit);
    }
  }, [jsonToSubmit]);

  function handleSubmit(e) {
    e.preventDefault();
    setJsonToSubmit({ firstName, lastName });
  }
  // ...
}

hesaplama zincirleri

function Game() {
  const [card, setCard] = useState(null);
  const [goldCardCount, setGoldCardCount] = useState(0);
  const [round, setRound] = useState(1);
  const [isGameOver, setIsGameOver] = useState(false);

  // 🔴 Avoid: Chains of Effects that adjust the state solely to trigger each other
  useEffect(() => {
    if (card !== null && card.gold) {
      setGoldCardCount(c => c + 1);
    }
  }, [card]);

  useEffect(() => {
    if (goldCardCount > 3) {
      setRound(r => r + 1)
      setGoldCardCount(0);
    }
  }, [goldCardCount]);

  useEffect(() => {
    if (round > 5) {
      setIsGameOver(true);
    }
  }, [round]);

  useEffect(() => {
    alert('Good game!');
  }, [isGameOver]);

  function handlePlaceCard(nextCard) {
    if (isGameOver) {
      throw Error('Game already ended.');
    } else {
      setCard(nextCard);
    }
  }

  // ...

Uygulamayı Başlatma

function App() {
  // 🔴 Avoid: Effects with logic that should only ever run once
  useEffect(() => {
    loadDataFromLocalStorage();
    checkAuthToken();
  }, []);
  // ...
}

Ana komponentleri state değişiklikleri hakkında bilgilendirme

function Toggle({ onChange }) {
  const [isOn, setIsOn] = useState(false);

  // 🔴 Avoid: The onChange handler runs too late
  useEffect(() => {
    onChange(isOn);
  }, [isOn, onChange])

  function handleClick() {
    setIsOn(!isOn);
  }

  function handleDragEnd(e) {
    if (isCloserToRightEdge(e)) {
      setIsOn(true);
    } else {
      setIsOn(false);
    }
  }

  // ...
}

Parent’a data aktarma

function Parent() {
  const [data, setData] = useState(null);
  // ...
  return <Child onFetched={setData} />;
}

function Child({ onFetched }) {
  const data = useSomeAPI();
  // 🔴 Avoid: Passing data to the parent in an Effect
  useEffect(() => {
    if (data) {
      onFetched(data);
    }
  }, [onFetched, data]);
  // ...
}

Harici bir bilgi kaynağına abone olma

function useOnlineStatus() {
  // Not ideal: Manual store subscription in an Effect
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function updateState() {
      setIsOnline(navigator.onLine);
    }

    updateState();

    window.addEventListener('online', updateState);
    window.addEventListener('offline', updateState);
    return () => {
      window.removeEventListener('online', updateState);
      window.removeEventListener('offline', updateState);
    };
  }, []);
  return isOnline;
}

function ChatIndicator() {
  const isOnline = useOnlineStatus();
  // ...
}

Veri Getirmek

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    // 🔴 Avoid: Fetching without cleanup logic
    fetchResults(query, page).then(json => {
      setResults(json);
    });
  }, [query, page]);

  function handleNextPageClick() {
    setPage(page + 1);
  }
  // ...
}

Özet

• Render sırasında bir şeyi hesaplayabiliyorsanız, bir Efekte ihtiyacınız yoktur.

• Pahalı hesaplamaları önbelleğe almak için useEffect yerine useMemo ekleyin.

• Tüm bileşen ağacının durumunu sıfırlamak için ona farklı bir key iletin.

• Bir prop değişikliğine yanıt olarak belirli bir state’i sıfırlamak için, onu oluşturma sırasında ayarlayın.

• Bir komponent görüntülendiği için çalışması gereken kod Effects'te, geri kalanı eventlerde olmalıdır.

• Birkaç komponentin state’ ini güncellemeniz gerekiyorsa, bunu tek bir event sırasında yapmanız daha iyi olur.

• State değişkenlerini farklı koponentlerde senkronize etmeye çalıştığınızda, state’i üst komponente almayı düşünün.

• Effects ile veri getirebilirsiniz, ancak race condition’ larından kaçınmak için temizleme fonksiyonu eklemeniz gerekir.

You Might Not Need an Effect

Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your components with some external system like a non-React widget, network, or the browser DOM. If there is no external system involved (for example, if you want to update a component's state when some props or state change), you shouldn't need an Effect.

https://beta.reactjs.org/learn/you-might-not-need-an-effect