Yesterday, I bought my first React book ‘Learn React Hooks, Build and Refactor Modern React.js applications using Hooks’ written by Daniel Bugl, because although I’ve become more of a visual and auditory learner these days, I wanted to try a different medium.
I set as my target to read 100 pages out of 415 and to answer the questions at the end.
All my answers are open answers based on what I’ve read in this book.
What are React’s fundamental principles:
The principles are :
-To make it easy to write code
-To encapsulate components
-To share code across multiple platforms
What are the problems with class components in React?
Classes are problematic because of ‘this’. In javascript, ‘this’ can refer to different things, like in an event handler, it refers to the element that received the event. In a method, it refers to the class object. In a function or when standing alone, it refers to the global object. So it can be difficult for the computer to know how ‘this’ will be modified. Also, with class components, we have to write code in multiple places at once.
What are the problems of using higher-order components in React?
The problem is called ‘Wrapper hell’ because if we have to use multiple contexts, we'd have to wrap them around each other resulting in a large tree with many sub-trees. This makes debugging difficult.
What does the error “TypeError: undefined is not an object(evaluating’this.setState’ ) mean?
This error appears in class based components which use the constructor method, whenever we fail to bind ‘this’ in a handler method we’ve created. The code for this looks like:
constructor(props){
super(props)
this.state={name: ‘’}
this.handleChange=this.handleChange.bind(this)
}
What are the advantages of using function components with Hooks, in comparison to class components?
When function components use Hooks, we'd use them just as we'd use any Javascript function. A useState() hook for example returns two things; the current state and a setter function to set the state. We totally get rid of the constructor and the issues it brings, making code easier to read.
Also,hooks are also more declarative that class based components. This means that we tell the code what we want it to do as opposed to telling it how to do what we want it to do.
Do we need to replace all class components with function components using Hooks when updating React?
No, the React team is not getting rid of class based components and Hooks should be seen as complementary. It’s useful for extracting logic,is backward compatible meaning that it provides a direct API to things we already have in class based components. Things like props, life cycle, refs, state, context.
What are the three basic hooks that are provided by React?
-useState(returns a stateful value and a setter function)
-useEffect(similar to adding a function on componentDidMount, componentDidUpdate and componentWillUnmount in classbased components)
-useContext(replaces context consumers)
Why are conditional Hooks not possible in the React implementation of Hooks?
This is because with Hooks, order matters and because of the rerenders it triggers. Basically with this one, it’s React Hook’s way of doing things. Our use of Arrays which makes it easy to rename the variables through destructuring like const[name, setName] = useState(’’) is the reason why order matters.
What are Hooks and what do they deal with?
React Hooks are incredibly useful for separating stateful logic from rendering logic. We have to think more of the data flow as opposed to thinking about the lifecycle or worrying about changing the hierarchy of components to implement stateful logic. One thing to note is that Hooks cannot be put in if conditionals, loops or nested functions, but there is a work around to this.
Hooks are simple Javascript functions which deal with side effects such as setting a stateful value.
What do we need to watch out for when using hooks?
We need to watch out for the way components rerenders when the state gets reset.
We also need to have all of our Hook definitions at the beginning of our function component and never nest them within if constructs.
What are the common problems of alternative API ideas for Hooks?
For one of the alternative API ideas; named hooks, there would be the issue of having to think up unique names and avoiding name collisions with our custom hook names (same names cannot be called in the component after they’ve been declared) when storing them in an object instead of an array. In addition, memory leaks can occur if we do not clear the hook state or when a conditional is set to false.
Another alternative called a hook factory, which uses a ‘symbol’ and gives each hook a unique name has the issue of requiring you to instantiate the hook twice; one inside of the component and later outside of the function component. This makes debugging harder.
How do we implement conditional Hooks?
We do this by counting the order in which hooks are called i.e by keeping track of them and using them like any other function.
How do we implement Hooks in loops?
We first define the Hook and then use it when we need to. Alternatively, we can split our components and this is a better approach.