This is part two of the questions I can now answer after reading an additional 50 pages of Learn React Hooks, Build and refactor modern React.js applications using Hooks.
What are the common problems with state hooks?
State Hooks are not optimized for handling really complex state changes. It forces us to use a lot of spread syntax in order to not override the previous states whenever we want to directly change the state. This makes debugging harder.
What are actions?
Actions are objects that have a type key and additional keys which describe them. They are used with functions which enable state changes to be dealt with differently instead of directly changing them. An example of an action type would be something like
{type:’TOGGLE_EXPAND’}
What are reducers?
Reducers are those functions mentioned earlier which take the actions as arguments and returns a new state.
So, a reducer function takes the state and the action as parameters and uses switch statements to check the type of action.
When should we use a Reducer Hook instead of a state Hook?
We should use a Reducer Hook whenever the state object of state changes become too complex in our app. Global changes can happen anywhere in an app and the useReducer Hook is best in the Global State.
Which steps are needed in order to turn a state Hook into a Reducer Hook?
To do this, we need to define the actions, reducer function and replace the state Hook with a Reducer Hook. The Reducer Hook takes the state and dispatch function to the components that need it.
Example of state Hook being transformed to a Reducer Hook is:
const[user, setUser] = useState(’’)—state hook
const[user, dispatchUser] = useReducer(useReducer, ‘’)– transformed State Hook
where user is the state, dispatchUser is the dispatch function, useReducer is the reducer fucntion and the empty quotes represents the initial State.
When should we merge Reducer Hooks?
We should do this when we have two different dispatch functions.
What do we need to watch out for when merging Hooks?
We need to watch out for unhandled actions. In the switch statement for reducer functions, we should make sure that the default of throw new Error() is changed to return state.
What is the equivalent of an Effect Hook in class components?
The equivalent in a class based component would be componentDidMount and componentDidUpdate life cycle methods.
What are the advantages of using an Effect Hook, versus class components?
We avoid repeated code that is common when using the classbased equivalents. In componentDidMount for example, if we were checking for a title props, we’d have to write the same code in componentDidUpdate to compare the prevProps of the title to prevent unnecessary rerenders. With useEffect, all we need to do is not specify a dependency array to trigger it whenever a prop in a component changes.
What problem do contexts avoid?
Context Hooks avoid the problem of having to pass down props over multiple layers of components. They allow us to share values between components and across the application.
What are the two parts that contexts consist of?
Contexts consist of a provider and a consumer. The provide provides or sets the value and the consumer uses or consumes it.
Are both parts required to be defined in order to use contexts?
From what I’ve read, contexts can use a default value that is passed to React.createContext whenever no provider is defined, so probably not required. We can also define multiple providers for the same context.
What is the advantage of using Hooks, instead of traditional context consumers?
Using contexts too often can make it difficult to reuse components. We should only use it when we need to pass data in many components which are at different nesting levels. Also, they should be used for data which does not change frequently. For data which changes frequently, Redux or MobX is better.
How can we implement dynamically changing contexts?
Instead of passing a static value to the provider, we can use state Hook with the context Provider
When does it make sense to use contexts for state?
It makes sense to do so when we want to avoid having to manually pass down the state and dispatch props for our global app state.