I have build an application for scheduling shifts. My problem is now that with a few more employees the performance suffers. It is currently acceptable, but I want to futureproof my system.

React Components

There is a Main Roster Component, inside that are EmployeeRows and these contains Days which could have assigned shifts.

Data

The data is loaded via websockets and currently stored in States. There are multiple separate states for employees and shifts. Each holds an array of these objects:

const [employees, setEmployees] = useState<Employee[]>([]);
const [shifts, setShifts] = useState<Shift[]>([]);

If a shift is updated, the frontend receives a websocket message and updates the state:

setShifts(shifts.map((s: Shift) => {
    if (s.id == event_parsed.data.id) {
        return {...event_parsed.data};
    } else {
        return s;
    }
}));

The Problem

The data is currently distributed via a Context.Provider around all EmployeeRows (to avoid Prop drilling). When the shift-state now changes basically the whole application re-renders. In an ideal world I only want to re-render the affected EmployeeRow or even just the Day.
I thought useMemo could help here to cache the values. My though was to filter the shifts according to the employee id, hold these in the EmployeeRow and use useMemo to cache these values. But because I update the Shift-State useMemo would always update (or am I wrong?).

Solution Thoughts

Maybe it isn’t wise to hold Employees and Shifts in a separate state. Of course I could combine these and append the relevant Shifts to the Employee-Object. The Employees need to be in a State (because if the user would switch the displayed week, the available employees may change). But how do I split the employee State, so that only the changed Employee re-renders? I feel like I’m missing something crucial here…

Any help is greatly appreciated 🙂 Thanks!

PS: I hope I got all information that are needed, if you need anything else just tell me