React Hooks: All You Need

1. useState-

store the state and change it with setState()

2. useReducer

For more complex state logic, the alternative way for useState is useReducer

setup the state with useReducer with reduce function which is a switch…case

const [state,dispatch]=useReducer(reducer,{count:0,text:showText})

reducer is the function to change state with conditions

initial the count and text after it

when dispatching the state, means the state changes, then we look for the reducer function.

The action type decides how the state turns.

When clicking, we can trigger onClick with dispatch according to different types.

3. useEffect-

the action will call when rendering

Such as fetching the API when the page renders

useEffect(()=>{…}) Call every time rendering

useEffect(()=>{…},[])Call with the condition applied

For example, Whenever the [?] changes, call.If empty [ ], call once.

4. useRef-

easy to access DOM and manipulate it

return a ‘ref’ object

Value is persisted in the refContainer.current property

useRef(null) set a ref initially

remember to call the ref in the input tag to connect them.

When clicking the button, return the ref value with .current.value

7. useContext

createContext in the parent component and run with Provider

pass the value in parent component to child component in attr

import in the AppContext to get the setUsername

useContext in the child component and manipulate the state in the parent