How to prevent my images from disappearing

Question

I am using React + Firebase store to display images that I have stored in my firebase storage. When I click the logo or "home" navigation button which routes to the page you are already at("/"), the images disappear. The images also disappear when I click a button used to sort the menu.

This is the file that retrieves the images:

  let { docs } = useFirestore("images");

// This code is used to display the images/cards as 2 per row
  var chunks = function (array, size) { 
    var results = [];
    while (array.length) {
      results.push(array.splice(0, size));
    }

    return results;
  };
  let data = chunks(docs, 2); 


  return (
    <>
      <div class="container">
        <div class="row">
          <div class="col-sm col-2 mt-5">
          </div>
          <div class="col-12">
            <div className="cards">
              <h1 className="cards__header">Menu</h1>
              <div className="cards__container">
                <div className="cards__wrapper">
                  {data.map((childs, index) => {
                    return (
                      <ul className="cards__items">
                        {childs.map((c, cindex) => {
                          return (
                            <>
                                  <CardItem
                                    src={c.url}
                                    key={c.id}
                                    text={c.imageText}
                                    amountLeft={c.amountLeft}
                                    label={c.imageLabel}
                                    price={c.price}
                                    id={c.id}
                                    desc={c.desc}
                                    cat={c.cat}
                                  ></CardItem>
                                ))}
                            </>
                          );
                        })}
                      </ul>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

This is the useFireStore.js file:´

import { useState, useEffect } from "react";
import { projectFirestore } from "../Firebase";

const useFirestore = (collection) => {
  const [docs, setDocs] = useState([]);

  useEffect(() => {
    const unsub = projectFirestore
      .collection(collection)
      .orderBy("createdAt", "desc")
      .onSnapshot((snap) => {
        let documents = [];
        snap.forEach((doc) => {
          documents.push({ ...doc.data(), id: doc.id });
        });
        setDocs(documents);
      });

    return () => unsub();
  }, [collection]);

  return { docs };
};

export default useFirestore;

You can see the app at https://save-a-meal.web.app, it is in Danish though.

Answer 1

The bug is in the chunks part. On a rerender it is called again but it manipulates the docs value. To make your code work just call it like this:

const data = chunks([...docs], 2);

insted of:

const data = chunks(docs, 2);

We create a copy of the data so the function doesn't manipulate it.