Rehooks have been introduced in React for a long time, have been used in the project and have not read the documentation carefully, today I am going to review the documentation again to get a feel for what I learned.

This is the 15th day of my participation in the August Text Challenge.More challenges in August

Today we will continue learning about several advanced Hooks: useContext, useCallback.

useContext

Imagine this scenario: You have a component in which you define some states and methods to modify them, and within that component there are nested child components. All of a sudden one of the component’s great-grandchildren needs to use that component’s state, and you might have to pass state-related properties all the way down to that descendant component. Intermediate components may be passed unwanted state or data, which can clutter up the code in the long run.

In fact, we only care about two factors:

  • Where is the state?
  • Who use

Other issues, how many components are separated or nested between where the state is defined and where it is used, should not bother developers. This is the essence of useContext’s design.

There are three components: App->Parent->Child

//context.ts
import React from "react"interface IUserInfo { name? :string, age? :number, sex? :string }export const AppContext = React.createContext<IUserInfo>({})

//App.tsx
import {AppContext} from './app-context'
import {Parent} from './parent'
export const App = ({}) = > {
  return <AppContext.Provider value={{
    name:"Andrew ",age:18.sex:"Male"}} >
    <Parent/>
  </AppContext.Provider>
}


//parent.tsx
import React from "react"
import {Child} from './child'
export const Parent:React.FC<{}> = () = > {
    return <h2>
        <Child/>
    </h2>
}

//child.tsx
import React from "react"
import {AppContext} from './context'
export const Child:React.FC<{}> = () = > {
    const userInfo = React.useContext(AppContext)
    return <h2>Name: {the userInfo. Name}<br/>Age: {the userInfo. Age}<br/>Gender: {the userInfo. Sex}<br/>
    </h2>
}
Copy the code

Can you see that? The parent component does not receive state from the App and pass it to the Child. Instead, use useContext directly to fetch the upper defined value from the child.

useCallback

To get started, consider a scenario where a parent component defines a method, which is then given to a child component, and the child component useEffect when the props method is updated. What happens when the parent component is rerendered?

//parent.ts
export const Parent:React.FC<{}> = () = > {
    const [counter,setCounter] = React.useState(0)
    const [staticState,setStaticState] = React.useState(false)
    useEffect(() = >{
        console.log('parent update')})// This method declares a new function each time this component is rendered (reference)
    const callback = () = >{
        console.log('The parent component defines a function! ')}// Each time this component renders, a new function is declared only when the staticState changes (reference)
    const callback = React.useCallback(
        () = > {
        },
        [staticState]
    );
    return <div>
        {counter}
        <button onClick={()= >{setCounter(counter+1)}}> Click</button>
        <Child callback={callback}/>
    </div>
}
// child.ts
export const Child:React.FC<{callback:any}> = ({callback}) = > {
    React.useEffect(() = >{
        console.log('child update')
    },[callback])
    return <h2></h2>
}
Copy the code

We found that when the parent component is re-rendered, the child component will be rendered along with the parent without useCallback, and with useCallback+useEffect the child component will be re-rendered only when the parent’s staticState changes.

To be continued

Thanks for reading!