NERVESYS | React useEffect: array as a dependency

Generalno, beskonačne petlje se smatraju lošom praksom. Ali u nekim slučajevima nemate druge opcije. Kada beskonačna petlja radi bez prekida, pregledač će zatvoriti tab na kojem se izvršava vaš kod. Naravno, trebamo sprečiti da se to dogodi.

useEffect hook nam omogućava da izvršimo sporedne efekte u funkcionalnim komponentama. U ranijim verzijama React-a, imali smo metode životnog ciklusa za svaki od sporednih efekata, kao što su componentDidMount, componentDidUpdate, componentWillUnmount...

useEffect prihvata povratnu funkciju koja će biti pozvana pri svakom renderovanju komponente ili kada se promeni određena vrednost koja je prosleđena u nizu zavisnosti. Korisćenje useEffect hook-a


                                useEffect(
  () => {
    // Mounting
    return () => {
      // Cleanup function
    };
  },
  [ /* Dependency array */ ]
);

The dependency array is the second optional argument in the useEffect hook.It is an array of dependencies that when changed from the previous render will call the callback function passed as the first argument.

U JavaScriptu, plitko poređenje dva niza uvek daje rezultat false. Zbog toga, prosleđivanje niza kao zavisnosti može dovesti do beskonačne petlje.


                                [] === []; // false


                                export default function App() {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const getItems = () => {
      fetch("/items")
        .then((res) => res.json())
        .then((data) => {
          setItems(data);
        });
    };

    getItems();
  }, [items]);

  return (
    <div className="App">
      {items.map((item) => (
        <Item item={item} />
      ))}
    </div>
  );
}

Ovde pokušavamo da dohvatimo neke podatke kad god se niz stavki promeni, ali postavljamo stavke iznova i iznova u istom useEffect-u gde se koristi kao zavisnost, što dovodi do beskonačne petlje.

Da bismo rešili ovaj problem, potrebno je koristiti kuku nazvanu useRef. useRef kuka vraća promenljiv objekat koji sadrži trenutnu početnu vrednost. Koristimo je na sledeći način:


                                const { current: itemsRef } = useRef(items);
// passing items as the initial value

Zatim prosleđujemo itemsRef u nizu zavisnosti. Sada ovo funkcioniše jer useRef kreira običan JavaScript objekat ali pamti početni objekat i ne stvara novi objekat pri svakom renderovanju.

useRef hook referenca


                                import React, {(useEffect, useState, useRef)} from "react";

export default function App() {
  const [items, setItems] = useState([]);
  const { current: itemsRef } = useRef(items);
  useEffect(() => {
    const getItems = () => {
      fetch("/items")
        .then((res) => res.json())
        .then((data) => {
          setItems(data);
        });
    };

    getItems();

}, [itemsRef]);

return (

<div className="App">
  {items.map((item) => (
    <Item item={item} />
  ))}
</div>
); }

Uspešno smo koristili naš niz kao zavisnost bez izazivanja beskonačne petlje i trošenja hiljada dolara u produkciji.

Hvala što ste pažljivo pratili sve do kraja. Nadam se da je ovo pomoglo bilo kome kao što bi meni pomoglo kada sam se suočavao sa ovim problemom.

React useEffect: array as a dependency

Filip Ivanovic