useEffect is not running for every change in dependency array - reactjs

Question

When I update an expense, it doesn't trigger the useEffect to store the the data in local storage.
codesandbox
import React, { useState, useEffect } from 'react';
export const ExpenseContext = React.createContext();
const ExpenseState = (props) => {
const [state, setState] = useState(
() => JSON.parse(localStorage.getItem('expenses')) || []
);
useEffect(() => {
console.log('didUpdate', state)
state.length !== 0 && localStorage.setItem('expenses', JSON.stringify(state));
}, [state])
function addExpense({id, name, category, value, note, date}){
const expense = state.find(exp => exp.id === id);
if(!expense){
setState(state => ([...state, {id, name, category, value, note, date}]))
}else{
const updatedExpense = state.map(exp => {
if(exp.id === expense.id){
return {
...exp,
...{id, name, category, value, note, date}
}
}else{
return exp
}
})
setState(updatedExpense)
}
console.log(state)
}
return (
<ExpenseContext.Provider
value={{
expenses: state,
addExpense: addExpense,
}}
>
{props.children}
</ExpenseContext.Provider>
)
}
I am calling the addExpense for every elements of the array. Assume we have 4 expenses stored in storage. Now we have updated one expense and then running the below code.
for(const expense of expenses){
expenseContext.addExpense(expense);
}
Now the use effect only get triggered for the last element and the expense also not getting updated in context.

Answer 1

You code is working, I'm not sure if you just missed some stuff?
1. export default ExpenseState is missing?
2. Wrap your App with ExpenseState context
Assuming you have a default CRA setup:
// index.js
import React from "react"
import ReactDOM from "react-dom"
import ExpenseState from "./AppContext" // or where your Context
import App from "./App"
const rootElement = document.getElementById("root")
ReactDOM.render(
<ExpenseState>
<App />
</ExpenseState>,
rootElement
)
And your App.js
// App.js
import React, { useContext } from "react"
import { ExpenseContext } from "./AppContext"
export default () => {
const { expenses, addExpense } = useContext(ExpenseContext)
const handleExpense = () => {
addExpense({
id: 1, // Change ID to add another object
name: "some name",
category: "some category", // keep the id and change some values for update
value: "some value",
note: "some note",
date: "some date"
})
}
return (
<div className="App">
<button onClick={handleExpense}>Add Expenses</button>
<pre>
<code>{JSON.stringify(expenses, null, 2)}</code>
</pre>
</div>
)
}
Working codeSandBox example.

Answer 2

The problem is that useState is working differently than you think it does. Inside the consumer you're calling api.addExpense(...) three times in a row synchronously with the expectation that calling setState will update state in-place - it doesn't, the state is only updated on the next render call and not at line 40 as your console.log there suggests you're expecting it to.
So instead of the three complete state updates you're expecting (one for each expense) you only get the state from the last update for {id: "d6109eb5-9d7b-4cd3-8daa-ee485b08361b", name: "book", category: "personal care", value: 200}, which has no changes and is still based on the original state not one where the first item's value has been set to 800.
I'd suggest modifying your ExpenseState api to take an array of expenses so it can handle multiple internal updates appropriately.
function addOrUpdateExpense(state, { id, name, category, value }) {
const expense = state.find(exp => exp.id === id);
if (!expense) {
return [...state, { id, name, category, value }];
} else {
const updatedExpense = state.map(exp => {
if (exp.id === expense.id) {
return {
...exp,
...{ id, name, category, value }
};
} else {
return exp;
}
});
return updatedExpense;
}
}
function addExpenses(expenses) {
let newState = [...state];
for (const expense of expenses) {
newState = addOrUpdateExpense(newState, expense);
}
setState(newState);
}
// ...usage
function doIt() {
api.addExpenses(expenses);
}
This is a common misconception, just remember that the next state is only available asynchronously in the next render phase, treat state from useState as immutable within a render pass.