Notes for Codefellows Code 401 301 201 and 102
source Components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is reffered to as a component lifecycle. React components have a lifecycle consisting of three phases:
medium By wrapping it around a function declaration and defining the dependencies of the function, it ensures that the function is only re-created if its dependencies changed. Hence the function is NOT re-built on every render cycle anymore. No more infinite loop!
source Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks. You end up with less code. They help you to use best practices.
import React, {useState, useEffect} from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
function changeCount(e) {
setCount(e.target.value);
}
let renderedItems = []
for (let i = 0; i < count; i++) {
useEffect( () => {
console.log('component mount/update');
}, [count]);
renderedItems.push(<div key={i}>Item</div>);
}
return (<div>
<input type='number' value={count} onChange={changeCount}/>
{renderedItems}
</div>);
}
this code will loop infinitely. avoid your useEffect from looping because it will become infinite. You’ll want to implement useCallback to break the infinite loop and wrap the whole function with useCallback.
source
A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components.
the basic hook of react, equivalent to this.state = {} in a class-based component.
source What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. performs side effects in a function component. Can trigger on any page re-render, or specific component renders.
source useReducer is one of a handful of React hooks that shipped in React 16.7. 0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function. instead of a state hook which modifies a state in place, a reducer takes a state and a dispatch function, and returns a new state
Skim the following materials in preparation for the upcoming lecture. Note the following as you browse the material, and be prepared to participate in discussions during lecture