React Hooks pt.1

State, Lifecycle & Custom functionality
inside function based components

From React v16.8

Topics

• useState
• useEffect
• useRef
• useReducer
• extra's

useState

• // const [value, setValue] = useState(initialState);

• Function that has access to the state
• returns Array to destructure
• needs Initial state
• value & setValue()
• setValue(newState)

useState

Basic example
demo

Basic refactor class example
demo

useEffect

• Functions like lifecycle methods
• Runs after react has updated the DOM
• componentDidMount, componentDidUpdate, and componentWillUnmount combined
• Does not effect the render cycle

useEffect

Window example
demo

Custom hook example
demo

Fetch example
demo

useRef

• ref is a way to reference a DOM node
• examples: useOnClickOutside, useOnScreen

useRef

Focus example
demo

useReducer

• When the state is a little bit more complex.
• To be compared with redux, but on a local state

useReducer

Counter example
demo