fix: fix the menu item to navigate to a form to hide when 'hidden' ticked

[teboho]

fix the menu item to navigate to a form to hide when 'hidden' ticked

before:

after:

---

• The fact that this is a one line fix is mind-boggling
• I thought this works because the push function is slower than the concat function, it turns out it's actually faster and that speed was not the problem
• Perhaps the fact that the concat function creates a new array (a new object instance, while discarding the old one) each time helps

[teboho]

Related issue #2268

[teboho]

I just asked ChatGPT why this works and the hunch seems correct..

In React and state management, using itemsToCheck.concat([item]) is often better than itemsToCheck.push(item) because of immutability and predictable state updates. Here's why:

---

1. React State Should Be Immutable

React relies on detecting changes in state to decide when to re-render components. If you mutate an array (e.g., using push), the reference to the array remains the same, and React may not detect that the state has changed.

• push Mutates the Original Array:

  itemsToCheck.push(item); // Modifies the original array
  setItemsToCheck(itemsToCheck); // React might not detect the change

• concat Returns a New Array:

  const newArray = itemsToCheck.concat([item]); // Creates a new array
  setItemsToCheck(newArray); // React reliably detects the change

By using concat, you ensure the state change is properly detected because React sees a new array reference.

---

2. Functional Updates in React

When updating state, React encourages immutability to avoid unintended side effects. Directly mutating the existing array (e.g., with push) can lead to bugs if other parts of the code or components rely on the old state.

• concat Example:

  setItemsToCheck((prevItems) => prevItems.concat([item]));

This ensures that the new state is derived from the previous state in an immutable way.

---

3. Debugging and Predictability

Mutating an array with push can lead to unexpected bugs because the same array reference is shared across your application. If another part of your app modifies the same array, it can cause unpredictable behavior.

• With concat:
  You always work with a new array, reducing the chance of unintended side effects.

---

4. Pure Functions in State Management

React's state updates are designed to work best with pure functions (functions without side effects). concat adheres to this principle, while push violates it by mutating the array.

---

Summary

When dealing with React state:

• Use concat to create a new array and preserve immutability.
• Avoid push to prevent mutating the existing state, ensuring React detects changes and updates the UI correctly.

---

Code Comparison:

Using concat (Recommended):

const addItem = (item) => {
  setItemsToCheck((prevItems) => prevItems.concat([item]));
};

Using push (Not Recommended):

const addItem = (item) => {
  itemsToCheck.push(item); // Mutates the array
  setItemsToCheck(itemsToCheck); // React may not detect the change
};

[AlexStepantsov]

Your changes brokes functionality of checking form access mode.

if you want to use concat then you should change this as itemsToCheck = itemsToCheck.concat([item]);
But with such changes, it will also not work, as it did not work before.

Btw, there is also a bug in itemsToCheck.concat(getItemsWithFormNavigation(item.childItems));
shold be
itemsToCheck = itemsToCheck.concat(getItemsWithFormNavigation(item.childItems));

The bug is in something else