What is the way of passing values between react hooks components?

This article introduces you what is the way of passing values between react hooks components, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Father passes on son

Pass the value through props, and use useState to control the state value of state

In the parent component Father.tsx:

In the sub-component Child.tsx:

Display effect:

A son inherits his father.

In the same way as react, a child component passes in a callback function, receives the return value of the child component, and then updates the state of the parent component

Parent component, in Father.tsx:

Sub-components, in Child.tsx:

Display effect:

The optimized version of the child is passed on to the parent, which uses useCallback to store the functions that handle events.

Parent component, in Father.tsx:

Sub-components, in Child.tsx:

Cross-level components (parent and descendant)

Use useContext to pass values, similar to React's Context

Steps to use:

Create context to use context.provider to associate components that need to pass values to introduce context, and useContext and get the value

Parent component, in Father.tsx:

Sub-components, in Child.tsx:

Grandson component, in Sun.tsx:

Display effect

What is the way of passing values between react hooks components is shared here, I hope the above content can be of some help to you, you can learn more knowledge. If you think the article is good, you can share it for more people to see.