State management: combination of global and local states?

[eneben]

Hello everyone 👋 ,

I'm currently trying to refactor our state management in our flashcard App. Up until now we had, among other states, an isDelete state (boolean) locally and an isEdit state (also boolean) globally. Because the isEdit state could not be toggled without exception, we were advised to reconsider whether a boolean was really the right choice.

Actually, I decided to solve it with strings and wrote the following useState and function in the _app.js:

const [actionMode, setActionMode] = useState("default");

function changeActionMode(mode) {
    setActionMode(mode);
  }

I used "default" or "edit" in the pages and components, depending on the situation, and that works well. What doesn't work is "delete". I simply adapted the system as above and set the actionMode to "delete". But then the state is global (not local in the Flashcard.js as before). The result is that I put all flashcards into delete mode at the same time, not just one specific one. Now I see two possible solutions:

I keep the global actionMode state and initially only use it for "default" and "edit" (maybe later for other things). I also keep the local "delete" state (that was actually practical as a boolean).

I change the (global) actionMode state so that I pass objects, e.g. {mode: "default", id: null} or {mode: "edit", id: null} or {mode: "delete", id: flashcardId}.

I don't think either is ideal, it has different advantages and disadvantages. The first solution is inconsistent because I manage the delete mode somewhere else than the others. But it is simpler and probably less prone to errors.
The second solution is more complex in terms of structure AND I have to pass on the ID in "delete" mode. I find that somehow unnecessarily complicated. But it is more logical/consistent to have the complete mode management in one place.

What would you recommend? Or do you have a completely different idea?

This is my refactoring branch. (The link is a PR, but it's not finished yet, of course.)

Thanks in advance for your thoughts. 🌻

[JessicaLoers]

Hello @eneben ✌️

Thanks for sharing your progress and thoughts on refactoring the state management. It looks like you’ve already made some important decisions, but you’re grappling with how best to handle the delete mode – and that's actually a very good question.

Let's break it down

Global State for All Modes

Using a global actionMode state, as you’ve implemented, works well for modes like "default" and "edit" because these states need to be consistent across the entire app. However, extending this approach to the "delete mode" has caused all flashcards to enter the delete state simultaneously, which isn’t the desired behaviour. 🫨

👍 Pros of a global state for all modes:

• Managing all modes in one place keeps the logic centralised and consistent across the app.
• For modes that need to affect the entire application (like "edit"), a global state is effective.

👎 Cons of a global state for all modes:

• The delete action is inherently specific to individual flashcards, and managing it globally requires additional complexity, such as passing and checking IDs.
• As you mentioned, adding IDs to the state increases the risk of errors and makes the code harder to manage and understand.

Local State for Delete Mode

Given that the delete action is specific to individual flashcards, it might be more practical to manage this state locally within the Flashcard.js component.

👍 Pros of a local state for delete mode:

• The logic for deleting a flashcard stays where it belongs, within the flashcard component itself, reducing the need for complex state management across the app.
• Keeping the delete state local means that other components remain unaffected, which reduces the risk of unintended side effects.

👎 Cons of a local state for delete mode:

• Having a mix of local and global states could introduce some inconsistency in how modes are managed, which might confuse future developers – or the future you – or lead to mistakes during maintenance.

My Recommendation

While there are trade-offs, I would lean towards keeping the delete mode as a local state within the Flashcard.js component. This approach simplifies the implementation where it matters most and keeps the global state clean and focused on modes that truly need to be shared across the app.

If you find that managing modes in two places becomes problematic in the future, you could always revisit the idea of centralising state management, but for now, the simplicity and clarity of local state for delete seems more beneficial to me.

I hope this helps! Looking forward to seeing how the refactor turns out.

[eneben]

Hello @JessicaLoers ,
thank you for your detailed answer! 😊 I will do it as you suggested. That seems to be the most straightforward solution, I just wasn't sure if it would be too inconsistent.
Thank you for your advice and see you tomorrow. ✨