Why are my react hooks not getting called?

This segment of code was working as expected but now the react hooks are not getting called.

import { store } from "./home.store";

const Home = () => {
 const [state, setState] = useState({});

 console.log('###store', store)

 useEffect(() => {
   console.log('USE EFFECT CALLED')
   console.log('state 1', store.getState());
   setState(store.getState());
 }, []);

 console.log("state 2", state);

 console.log('state 3', store.getState());
 setState(store.getState());
 console.log("state 4", state);

return (...)

Within the useEffect function, 'USE EFFECT CALLED' is never logged to the console. state 1 is never logged.

state 2 shows an empty object. state 3 correctly logs objects from the redux store. state 4 shows an empty object.

It appears useEffect and useState are not working. They worked previously.

Solution

Your app was crashing. Fixed it and i can see useEffect being called

import React, { useEffect } from "react";
import { useState } from "react";
import "./home.css";
import { store } from "./home.store";

const Home = () => {
  const [state, setState] = useState({});

  console.log('###store', store)

  useEffect(() => {
    console.log('USE EFFECT CALLED')
    console.log('state 1', store.getState());
    setState(store.getState());
  }, []);

  console.log("state 2", state);

  console.log('state 3', store.getState());
  // setState(store.getState());
  console.log("state 4", state);

  return (
    <div className="container-fluid">
      <section id="section-banner">
        <div className="row">
          <div
            className="col d-sm-flex justify-content-md-end align-items-md-start p-0"
            id="banner-column"
          >
            <img
              className="img-fluid d-none d-lg-block"
              src={state?.banner?.images[0]}
            />
            <img className="img-fluid d-lg-none" src={state?.banner?.images[1]} />
            <div className="text-center mt-4 mt-md-0" id="banner-text">
              <h6>{state?.banner?.texts[0]}</h6>
              <h1 className="mb-0">{state?.banner?.texts[1]}</h1>
              <h1 className="mb-0">{state?.banner?.texts[2]}</h1>
              <h1>{state?.banner?.texts[3]}</h1>
              <p className="mt-4">{state?.banner?.texts[4]}</p>
              <div className="d-flex justify-content-around mt-4">
                <h6 className="mb-1 d-inline-block">
                  <a href="#" style={{ fontSize: "13px" }}>
                    <strong>{state?.banner?.texts[5]}</strong>
                    <br />
                  </a>
                </h6>
                <h6 className="mb-1 d-inline-block">
                  <a href="#" style={{ fontSize: "13px" }}>
                    <strong>{state?.banner?.texts[6]}S</strong>
                    <br />
                  </a>
                </h6>
              </div>
              <div className="d-flex justify-content-around mt-4">
                <h6 className="mb-1 d-inline-block">
                  <a className="fw-bold" href="#" style={{ fontSize: "13px" }}>
                    {state?.banner?.texts[7]}
                  </a>
                </h6>
                <h6 className="mb-1 d-inline-block">
                  <a className="fw-bold" href="#" style={{ fontSize: "13px" }}>
                    {state?.banner?.texts[8]}
                    <br />
                  </a>
                </h6>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="section-2" className="mt-5 px-md-4">
        <div className="row">
          {state.section2?.map((section) => (
            <>
              <div className={section.class}>
                <img className="img-fluid" src={section.img} />
              </div>
              <div className={section.textData?.class}>
                <h4>Your Holiday Gift Guide</h4>
                <p>
                  Gifts for everyone on your list (including you).
                  <br />
                </p>
                <div className="d-flex mt-2 flex-column flex-lg-row w-100 justify-content-lg-around">
                  <h6 className="mb-1 d-block d-lg-inline-block">
                    <a href="#" style={{ fontSize: "12px" }}>
                      <strong>BEST SELLERS</strong>
                      <br />
                    </a>
                  </h6>
                  <h6 className="mb-1 d-block d-lg-inline-block">
                    <a href="#" style={{ fontSize: "12px" }}>
                      <strong>SHOP THE GIFT GUIDE</strong>
                      <br />
                    </a>
                  </h6>
                </div>
              </div>

            </>
          ))}
        </div>
      </section>
      
    </div>
  );
};

export default Home;