Prologue

Props are an integral part of every React application. It is used to pass data from the Parent Component to the child Components.
However, it is just one of many ways that React uses to pass data.

Props is a parameter passed inside a Component

for Typescript, there are 2 things to do with 1 Props:

1. export interface received by the Component
2. use that interface in Component

a single strict rule:
All React props must behave like pure functions:
pure functions are those that do not change the input parameters: function sum(a, b) { return a + b; }
these functions will not change the result with the same inputs
Implicit functions are common with functions whose props are Object, because Object can change the value of its parameters after exiting the function:

Because a Project can change over time, props alone are not enough, React creates State to solve the problem of changing parameters in each Component

Passing props in components

Remember that components can accept unlimited props, including primitives, React Components or functions.
You can pass data from one Component to another by passing it as an attribute in the HTML element as follows:

So in the Welcome component, the value of props will be an object including the values ​​passed:

When you pass a value inside a tag it will be the value of the chirlden property in the props object as shown above.

Get props in components

Get props in functional components by specifying parameters in the function.

Combine components

Some components don’t know about their child components when they are created. This is very common with components like Sidebar and Dialog that act as generic “boxes”. In this case I recommend using props.children to pass child elements directly to the render of these components:

It allows other components to pass child elements more dynamically by nesting JSX together:

sometimes you may need a lot of space in a component. In such a case you can create your own conventions instead of using a child:

use it:

This method may remind you of the concept of “slots” in other libraries but there is no limit to passable parameters like props in React.

Specialization

We sometimes think of components as “a special case” of other components. For example, we can say that WelcomeDialog is a special case of Dialog. In React, we can combine multiple “special” components to create a common component and customize it with its own props:

Practical examples

For example, a Page component passes the user and avatarSize to some level downgrading so that the Link and Avatar components can read:

Each line is a Parent Component and has a call to the Component directly below it. It might feel redundant to pass the user and avatarSize through multiple levels if only the Avatar component really needs it.
The problem is even bigger if the Avatar component needs more props from the top layer, you have to add all those props in all the middle layers.
One way to get around this without using context is to pass the Avatar component itself, this way intermediate components don’t need to hold the user or the avatarSize props:

then the code will look like this:

With this code, <Link> will be created at <Page> always, the child components no longer know what changes in <Link> .
This inversion of control can make your code clearer in many cases by reducing the number of props that need to be passed throughout your application and allowing control to reach the root component.

However, this is not a good choice for all cases, moving the complexity higher up in the component tree makes higher-level components complicated and forces the components to be more complicated. lower-level components become too flexible.

Sometimes there is duplicate data that is used by multiple components in the component tree, and at different levels. The Context now allows you to “broadcast” such data, and transmit it to all the underlying components.

Context is outdated now, so we can use Redux instead