Special actions on React state variables

Question

I have a React component with a state variable that needs specific actions. For example, consider a component that shows a list of user profiles, and the user can switch to another profile or create a new one. The state variable is a list of user profiles, and a second variable is the currently selected profile; the component can add a new profile (which is more specific than just "setting" a new list of profiles), or it can change the currently selected profile.

My first idea was to have two useState hooks, one for the list and one for the current profile. However, one problem with that is that I would like to store the current profile's id, which refers to one of the profiles in the list, which means that the two state variables are inter-dependent. Another issue is that having a generic setProfiles state change function is a bit too "open" for my taste: the add logic may be very specific and I would like to encapsulate it.

So I came up with this solution: a custom hook managing the two state variables and their setters, that would expose the two values (list and current id) and their appropriate actions (add new profile and select profile).

This is the code of the hook:

export const useProfileData = () => {
    const [ profiles, setProfiles ] = useState([]);
    const [ currentProfileID, setCurrentProfileID ] = useState(null);
    const [ currentProfile, setCurrentProfile ] = useState(null);

    useEffect(() => {
        // This is actually a lazy deferred data fetch, but I'm simplifying for the sake of brevity
        setProfiles(DataManager.getProfiles() || [])
    }, [])

    useEffect(() => {
        if (!profiles) {
            setCurrentProfile(null);
            return;
        }
        const cp = profiles.find(p => p.ID === currentProfileID);
        setCurrentProfile(cp);
    }, [ currentProfileID, profiles ])

    return { 
        currentProfile: currentProfile, 
        profiles: profiles,
        setCurrentProfileID: i_id => setCurrentProfileID(i_id),
        addNewProfile: i_profile => {
            profiles.push(i_profile);
            setProfiles(profiles);
            DataManager.addNewProfile(i_profile); // this could be fire-and-forget
        },
    };
};

Three states are used: the list, the current profile id and the current profile (as an object). The list is retrieved at mounting (the current id should be too, but I omitted that for brevity). The current profile is never set directly from the outside: the only way to change it is to change the id or the list, which is managed by the second useEffect. And the only way to change the id is through the exposed setCurrentProfileID function.

Adding a new profile is managed by an exposed addNewProfile function, that should add the new profile to the list in state, update the list in state, and add the new profile in the persistent DataManager.

My first question is: is it ok to design a hook like this? From a general software design point of view, this code gives encapsulation, separation of concerns, and a correct state management. What I'm not sure about if this is proper in a functional world like React.

My second question is: why is my component (that uses useProfileData) not updated when addNewProfile is called? For example:

const ProfileSelector = (props) => {
    const [ newProfileName, setNewProfileName ] = useState('');
    const { profiles, currentProfile, setCurrentProfileID, addNewProfile } = useProfileData();

    function createNewProfile() {
        addNewProfile({
            name: newProfileName,
        });
    }

    return (
        <div>
            <ProfilesList profiles={profiles} onProfileClick={pid => setCurrentProfileID(pid)} />
            <div>
                <input type="text" value={newProfileName} onChange={e => setNewProfileName(e.target.value)} />
                <Button label="New profile" onPress={() => createNewProfile()} />
            </div>
        </div>
    );
};

ProfilesList and Button are components defined elsewhere.

When I click on the Button, a new profile is added to the persistent DataManager, but profiles is not updated, and ProfilesList isn't either (of course).

I'm either implementing something wrong, or this is not a paradigm that can work in React. What can I do?

EDIT

As suggested by @thedude, I tried using a reducer. Here is the (stub) of my reducer:

const ProfilesReducer = (state, action) => {
    const newState = state;
    switch (action.type) {
        case 'addNewProfile':
            {
                const newProfile = action.newProfile;
                newState.profiles.push(newProfile);
                DataManager.addNewProfile(newProfile);
            }
            break;
        default:
            throw new Error('Unexpected action type: ' + action.type);
    }
    return newState;
}

After I invoke it (profilesDispatch({ type: 'addNewProfile', newProfile: { name: 'Test' } });), no change in profilesState.profiles is detected - or at least, a render is never triggered, nor an effect. However, the call to DataManager has done its job and the new profile has been persisted.

Answer 1

You should never mutate your state, not even in a reducer function.

From the docs:

If you return the same value from a Reducer Hook as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

Change your reducer to return a new object:

const ProfilesReducer = (state, action) => {
    switch (action.type) {
        case 'addNewProfile':
            {
                const newProfile = action.newProfile;
                return {...state, profiles: [...state.profiles, newProfile]}
            }
            break;
        default:
            throw new Error('Unexpected action type: ' + action.type);
    }
    return state;
}

Also not that reducer should no have side effects, if you want to perform some action based on a state change, use a useEffect hook for that.

For example: DataManager.addNewProfile(newProfile) should not be called from the reducer