Can you please tell me how to fetch data when data is added, deleted, or edited in next js? I have used useEffect, used a state to run useEffect but that is not working properly in my case, only when I add data, the useEffect function is triggered. But in edit or delete, it's not. I have used multiple compnents. So, how can I achieve this? (without state triggering the useEffect function). Thanks in advance!
const [added, setAdded] = React.useState(0);
React.useEffect(() => {
async function getTodos() {
const todosCol = collection(db, "todos");
const todoSnapshot = await getDocs(todosCol);
const todoList = todoSnapshot.docs.map((doc) => doc.data());
setTodos(todoList);
}
getTodos();
console.log("Use effect ran!!!");
}, [added]);
I am convinced. You have to use Redux or any other state management tools for achieving this. :)
I think your implementation needs refactoring.
The problem is mutable and immutable variables. But if you want this code working, just store added as a property inside state so that React can track the changes.
something like this:
const [state, setState] = useState({added: 0});