Best way to handle button's onPress from anywhere - reactjs

Question

The idea
I have a screen, which has a 'global' button on top, and some inputs on the bottom.
By default this 'global' button will go to 'home' screen.
I want that button to work like this:
[input focused] -> [button changes to 'back'] (when button is in 'back' state it will blur the input on press)
[button clicked] -> [input blurred] -> [button changes back to 'home'].
So I need to figure out how to handle button's onPress in any component in the app.
(With inputs I could do it with only Keyboard.dismiss(), but it's not only about inputs, I have some components that have their own way to do something on button's press)
My approach
I've already made this working with context api, but right now I don't know was it a good idea or not...
I have a context provider that looks like this:
export default function MainButtonControlProvider({ children, goToHome }) {
const [_type, setType] = useState('home');
const [_onPressFn, setOnPressFn] = useState(() => goToHome);
const reset = () => {
setType('home');
setOnPressFn(() => goToHome);
}
const set = ({ type, onPress }) => {
setType(type);
setOnPressFn(() => onPress);
}
return (
<MainButtonControlContext.Provider value={{ _type, _onPressFn, reset, set }}>
{children}
</MainButtonControlContext.Provider>
)
}
And that 'global' button like this:
export default function MainButton() {
const { _type, _onPressFn } = useContext(MainButtonControlContext);
const getIcon = () => {
switch (_type) {
case 'home':
return <HomeIcon />
case 'back':
return <ChevronIcon size={32} rotation={-90} />
}
}
return (
<Button icon={getIcon()} onPress={_onPressFn} />
)
}
And input like this:
export default function BasicInput() {
const inputRef = useRef(null);
const { set, reset } = useContext(MainButtonControlContext);
return (
<TextInput
ref={inputRef}
onFocus={() => set({ type: 'back', onPress: () => inputRef.current.blur() })
onBlur={() => reset()}
/>
)
}
The problem
So the input is focused, it changes 'global' button's look and onPress function.
The problem is that after set() or reset() are executed, every other component in the tree that also uses these set() and reset() functions from the MainButtonControlContext - rerender...
It's pretty logical that they do this, because state is changed and functions are remade in the context provider... But how do I get around this?
I could've used useCallback() on the set() and reset() functions, but set() takes arguments and they are always different, so there's no point in that.
So I need a different approach 🥲
I have never used redux, but I think it is a good idea to learn it, so if someone has an approach with it, I wouldn't mind changing the whole app for PERFORMANCE 😅
The thing that I didn't understand is how to handle button's onPress for that button, since redux state needs to be serializable...
Edit:
I tried to replace set() function in context provider with just set from useState, and wrap reset() with useCallback, and it worked! No more rerenders, but it's a pain to set all of the props when changing the button (I have 2 more states now). If someone knows how to change the set function from useState a bit without triggering rerenders, pls help ;)
I also tried to replace all of the useStates with useReducer, but for some reason change in state from useReducer won't trigger button's rerender...

Answer 1

The approach with Context API didn't work. I fixed rerenders of the components that used context by wrapping set and reset function in useCallback(I didn't know that I can pass arguments to useCallback 😅), but it did nothing because ALL of the components inside provider still rerendered after state change... I tried even memoizing the state, still didn't work.
I think I am missing something with using context api. If someone knows how to deal with state inside Providers, let me know, will be a good lesson ;)
I ended up using zustand to store the state needed for the main button. Redux felt like overkill for such a simple app and also I don't have any experience with it.
So I just created a store for the main button, like this:
import create from 'zustand';
export const useMainButtonStore = create((set, get) => ({
type: 'home',
onPress: () => console.warn('No onPress set in MainButttonStore.'),
_default: null,
set: (payload) => set(state => ({
/* state from payload */
})),
reset: () => set(state => ({
/* check if _default is set and then set state to _default */
})),
setDefault: (payload) => set(state => ({
/* set _default on initial app render */
})),
}))
And then in components.
These 2 can actually be combined in one line using shallow.
const setMainButton = useMainButtonStore(state => state.set);
const resetMainButton = useMainButtonStore(state => state.reset);
One concern that I had is whether it is ok to store functions. Up to this point I had no problems with this.
I'm sure there will be problems when persisting this store, because functions are not serializable, but there's no point in that :)