React Re-Render State Issue

Question

Wondering if anyone can help me. I am running into this weird issue when a state updates to re-renders all states in a react file:

Here is the main state that I don't want to update when doing something else:

{dashboard.layout.map((layout, i) => createContent(layout, i))}

However, when using Material UI Dialog I click on a button to open it which updates the state as follows:

onClick={handleDashletSelectorOpen}
const handleDashletSelectorOpen = () => {
    setDashletSelectorOpen(true);
  };

Here are the two states in question:

const [dashboard, setDashboard] = useState({
    layout: [],
    widgets: []
  });
const [dashletSelector, setDashletSelectorOpen] = useState(false);

What I would like to do is open the dialog box but without re-rendering the dashboard state. Is this possible? I'm sure there's something easy I'm missing but cannot figure it out.

Any assistance would be great.

Thanks

Answer 1

I was going about this all wrong. The issue here is the different "states" aren't different states rather one state with multiple props. Once I realised this the solution was easy, to get around this I moved all of the other props that didn't matter to a child component that way if the parent re-rendered then that's fine but if the child re-renders then the parent doesn't. Worked a charm