setting state with useState affects all useState hooks

Question

I am trying to build an ecommerce website, and I hit a problem I cannot seem to resolve. I am very new to react and JS so have some patience please:)

I declared 4 useStates in my app.js:

const [elementeDinState, setElementeDinState] = useState([]);
const [currentCategorie, setCurrentCategorie] = useState("Acasa");
const [subCategorie, setSubcategorie] = useState([]);
const [cartContents, setCartContents] = useState([]);

const fetchData = useCallback(async () => {
    const data = await getCategories();
    setElementeDinState(data);
  }, []);
  useEffect(() => {
    fetchData().catch(console.error);
  }, [fetchData]);

const changeHeader = (dataFromMenuItem) => {
    setCurrentCategorie(dataFromMenuItem);
  };

const changeCopiiContent = (data1FromThere) => {
    setSubcategorie(data1FromThere);
  };

const changeCart = (dataFromCart) => {
    setCartContents(dataFromCart);
  };

I am passing the functions to change those states to different child components as props. my problem is, when I add items to cart it triggers a re render of my component (products listing component) that should not be affected by cartContents and that resets the state of said component to the initial value that changes the items being shown. does useState hook create a single global state comprised of all those states?

Answer 1

From what I understand, your problem is that you're simply resetting the cartContents state every time you call the changeCart function, correct?

What you probably want, is to add (or remove ?) the item to the cart, like this?

const changeCart = (dataFromCart) => {
  setCartContents(oldContents => [...oldContents, dataFromCart]);
};

Answer 2

If these useState are defined in the app.js and then passed down, when a child will use them chasing the state will happen in the app.js so all the children of <App /> will be re-rendered.

I guess that your app.js looks similar:

function App() {
const [elementeDinState, setElementeDinState] = useState([]);
 // ...and the other hooks and methods

return (
   <cartContents setElementDinState={setElementeDinState} />
   <ProductList />
)
}

In this case the state is in the component so when <CartContents /> changes it, it will trigger a re-render of the and all its children <ProductList /> included.

To avoid this problem think better when each piece of state needs to be and put the state as near as possibile to that component. For example, if the state of the cart does not influence the Product list. Move the useState in the <Cart /> component.

Answer 3

Here is a description of useState from the oficial site :

useState is a Hook (...). We call it inside a function component to add some local state to it

So it creates just a local state.

About your problem, We need more information, but I believe that some parent component of that widget is trying to render other component instead of your the component that you wanted (let's call it "ProblemComponent") and rendering you ProblemComponent from scratch again, before you can see it.

it's something like that:

 function ParentComponent(props: any) { const isLoading = useState(false); // Some logic... if(isLoading) { return <LoadingComponent/>; } return <ProblemComponent/>; }

If that doesn't work you can also try to use React.memo() to prevent the ProblemComponent to update when it props change.

Answer 4

well, seems like I wanted to change the way react works so I figured out a work around, based on what you guys told me. I declared the state of the productsComponent in the parent component and adding to cart now doesn't force a refresh of the items being shown. thank you!