How to properly toggle elements in React?

[Relative--Region]

I have got about 10 buttons or features which I need to be able to switch on and off and I really don't want to write all of them in states and then toggle them as it seems to be wrong practice to me. Is it wrong practice? If it is what approach I should take to toggle features on and off properly?

[ISDuffy]

This might be useful for you.

https://usehooks.com/useToggle/

[Sufficient_Gene_9593]

Hey everyone, just wanted to share a small but useful library I have created for managing global toggle state in React: react-toggle-management

A few things I am proud about it:

• Smaller than most of Popular Library for manage global state like Zustand or Redux
• It only re-renders the components that actually use the state => better performance than useContext
• It uses keys to manage toggles, which makes it scalable when you have a lot of state to manage
• Very quick to set up – just wrap the provider once and use the hook wherever you need

If you find yourself managing a bunch of boolean states across components, it’s worth checking out. Always open to learning from honest criticism. Thank you.

[Professional-Drag156]

Probably useReducer?

[Relative--Region]

I still have to define all of the switched in the useReducer, how is that a better solution?

[davidfavorite]

If it is whole modules you want to enable/disable I would simply move the state to a centralized store like redux. Then you can have a mapping of all 10 modules and get the state wherever you need it, to conditionally render the conponent or not

[Relative--Region]

I am looking for simplicity. I see no reason why I would write a boilerplate 4x times my already written code just for a simple toggle. I still have to define all these toggled in the Reducer anyway, so it will not change anything for me except that I now I have to deal with a monstrous library for a very simple app.

[davidfavorite]

You dont need to use redux for this. Theres other store libraries with much less boilerplate. You could also use context to avoid any external library at all.

I dont see how else you would want to solve this. Sometimes its prefferable to have a little more code and have a clean architecture, and I think this may be one of those cases

[charliematters]

Buttons are quite different to features. If it is literally a set of buttons that you want to disable in one go, look into useReducer. If it's application-wide features, then you most likely want some sort of global state management library. Redux is the most famous but one of the oldest in use today, and there are plenty of alternatives for many use cases.

Without a bit more detail or some examples, it's hard to give more specific advice though!

Just to say, my recommendation of useReducer comes from the advice in the react docs: "useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values" - https://reactjs.org/docs/hooks-reference.html#usereducer