We Keep Coding

setting state with useState affects all useState hooks

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?

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.

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]);
};

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.

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!

Trouble chaining useEffects to use updated state from previous effects

I have an application that has some complex data fetching. Overall, here is a snapshot of the logic in my application
// dep1 is from redux, dep2 is local state
// useEffect 1
useEffect(() => {
// perform some state variable update to dep2
}, [dep1]);
// useEffect 2
useEffect(() => {
// use some values from deps to fetch data
}, [dep1, dep2]);
The issue I am facing is that when dep1 and/or dep2 update, the state change from useEffect 1 needs to reflect in the request url of the data fetching operation in useEffect 2. useEffect 2 ends up running twice, once with the dep1 update (without the dep2 update from useEffect 1 in the url) and once with the dep2 update. This issue is not specifically noticeable in most cases where we are just rendering, but we end up with double api fetches in cases where data fetching is used in the useEffect. What is some strategy that I can use to circumvent this double API call?
EDIT
Adding more code to allow more specifity for problem:
// useEffect 1
// when the user is changed (user is a prop that is from redux),
// option should be reset to "DEFAULT"
useEffect(() => {
setOption("DEFAULT");
}, [currentUser]);
// useEffect 2
// option is a value that can be set within the UI and is local state.
// setting option to a new value will trigger api call with new value
useEffect(() => {
const data = await getData(option);
}, [currentUser, option]);
The issue when option is not "DEFAULT" and currentUser changes, useEffect 2 will run twice. I would like to find some logic to allow it to run once with option set back to "DEFAULT" if currentUser changed. Is this possible using other react patterns, since it doesn't seem possible with useEffect?

I think you are complicating it alot. I would suggest using a single effect hook and compute the logic and perform data fetching in the same effect.
/ dep1 is from redux, dep2 is local state
// useEffect 1
useEffect(() => {
// perform some state variable update to dep2
// perform data fetching here and if you want to check some condition for dep2 you could do that here as well.
}, [dep1]);

Try setting dep2 inside a react component within the current component and passing it as a prop, so that you only have one useEffect in each component, with state being passed up.
const component = () => {
useEffect(() => {
// do something
}, [dep1]);
return (
<div> <ComponentTwo depTwo={depTwo}/> </div>
)
}
then in ComponentTwo ...
const componentTwo = ({ depTwo }) => {
// useEffect 2
useEffect(() => {
// use some values from deps to fetch data
}, [dep2]);
return (<div> something </div>
)
}
You'll need to import ComponentTwo inside the parent component.

React: confusion about the usage of `useRef` here for storing the previous state

I saw this custom hook when reading some blog post
const usePrevious = (value) => {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
};
I made a codesandbox to experiement with it https://codesandbox.io/s/weathered-surf-eenqo?file=/src/App.js
and indeed it works. It preserves the previous input value I had there.
And I tried to replicate this hook using useState
const usePrevious2 = (value) => {
const [prevValue, setPrevValue] = useState();
useEffect(() => {
setPrevValue(value);
}, [value]);
return prevValue;
};
However the value returned by usePrevious2 is in sync with the current state. I wonder what is the underline mechanism for the differences here? Why is that the ref can preserver the previous state but not another useState. Can someone explain this to me?

The issue with using useState here is that state updates result in re-renders.
If you use usePrevious / useRef and change the input, there will be one state update, when the input value changes - and after that state update occurs, the usePrevious will shortly schedule a ref.current = value assignment, but such assignment will not cause a re-render.
In contrast, with usePrevious2 / useState, when you use setPrevValue, a re-render will occur. When the input field changes, there will be 2 re-renders; one when the input field changes, and then another after the useEffect callback runs and calls setPrevValue. So the usePrevious2 will only be "out of date" for a very short time, until its effect hook runs and sets the state again.

React ı cant reach current state

React.useEffect(
() => {
const users = [
{id:123123123,
name:"mert",
del: <deleteButton onClick={()=>console.log(users)} />
}]
setusers(users)
}, [])
hello i have a problem
I created a useState called [users, setusers]
and in useeffect, I have assigned a delete function for each user.
this delete function needs to reach users state
But the problem starts here. When I want to reach users through the delete function,
I get the initial state of the state, (the state at the time I created the first user object)

In your useEffect hook you define a const variable called users.
In the onClick Event you output the const variable users and not the state variable users.
Which means const users is not equal to state.users
Rename your const variable 'users' and see if anything changes.

Unable to set state hook using useDispatch hook in React

I am using useEffect hook to dispatch action to my redux store on component load. Here is code:
const dispatch = useDispatch()
const hotelList = useSelector(state => state.hotels)
const [updatedList, setUpdatedList] = useState([...hotelList])
useEffect(() => {
dispatch(fetchHotels())
// setUpdatedList(hotelList) -- I've tried using this line here but still gets empty array
}, [])
It works fine because when I try to do {console.log(hotelList} I get array of objects from the redux store.
However, when I try to do setUpdatedList(hotelList) or even set initial state it does not work and I get empty array. How can I fix it?
P.S just to clarify I am 100% sure that action was correctly dispatched to the store as I can see the results in console.log as well as in redux dev tools.