useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
the โuseโ prefix also helps in easily identifying if a function is a custom hook.
Custom Hooks are a mechanism to reuse stateful logic , but every time you use a custom Hook, all state and effects inside of it are fully isolated. How does a custom Hook get isolated state? Each call to a Hook gets isolated state.
useState
Put the fetchData function above in the useEffect hook and call it
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Context is primarily used when some data needs to be accessible by many components at different nesting levels.
const MyContext = React.createContext(defaultValue);
const { addAlert } = useSnackBars()
>...
>addAlert('Your profile is updated!')