Context API
Review, Research, and Discussion
Describe use cases useState() 🆚 useReducer()❓ 📁
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.
Why do custom hooks need the use prefix❓ 📁
the “use” prefix also helps in easily identifying if a function is a custom hook.
What do custom hooks usually do❓ 📁
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.
Using any list of custom hooks, research and name one that you think will be useful in your applications❓
useState
Describe how a hook that fetches API data might work❓ 📁
Put the fetchData function above in the useEffect hook and call it
Context
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
When to Use Context
- Using context, we can avoid passing props through intermediate elements.
-
Context is primarily used when some data needs to be accessible by many components at different nesting levels.
- But use it sparingly because it makes component reuse more difficult.
note : If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.
API
- React.createContext
const MyContext = React.createContext(defaultValue);
hooks and context example
Snackbars in React: An Exercise in Hooks and Context.
- Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen.
const { addAlert } = useSnackBars()
>...
>addAlert('Your profile is updated!')