# Advance React patterns

# Destructing the props

Lets say we have a component Dhruv which we are passing inside the App function and displaying the Dhruv component in the UI. Suppose that we are passing 2 Dhruv Components to the UI and both have the same props .The common norm is that we write the props as follows:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648238185620/myb7zf6g4.png)

This is the common example and it is correct as well . However as the props are exactly same we can also create an object which contains the two parameters name and age and as a prop we can destructor the object

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648238492943/LRVrbxZbW.png)

Some extra information:
Internally react creates the component as:
React.createElement("Button",{
    name:"Dhruv",
    age:19
})

The props are passed as an object in the second parameter hence destructing becomes easy

# Simple State Machine in React -HTTP Request example

Lets consider a simple application wherein you type something in the search bar and the backend returns some data in the form of json and this data is displayed by the component to the UI. Simple right?

Here comes the concept of state. State means that lets say your initial component is displayed in the UI. Once you click the button some changes are made in the function that is the state of the function changes. 

Getting back to the data fetching example as we are making an HTTP request. Hence in that case we need to handle different possibility of states.

Some possibilities of the state are:
1)Loading state
2)Loaded state
3)Network error state
4)Server error state

Hence keeping all these states in mind we need to design our application which handles all these states .lets create an application

Data fetching application with different states of data fetching handled


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648288932196/b53yf0Qz-.png)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648288991305/_c_Nm-ooD.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648289019409/EFX_4F4A7.png)


**Compound Components**

What exactly are compound component?
Lets say you have a custom component Dhruv and you are loading this component to the UI. Now you build two more components Soni and It. But the need here is that the components Dhruv Soni and It should interact with one another that is they should share a common state

The requirement here is that you have Dhruv component as the parent component and Soni and It are child components. If you click a button from the It component it should display the marks of the Soni component.

Lets first create this basic structure

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648581121200/bNgRbssn2.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648581176376/MCZdP5W44.png)

With this the basic structure is now visible. Notice that in the Dhruv function the children was passed as an object and this object contains the child elements. if the children was not passed inside the Dhruv nothing would have been displayed on the screen because the parent component must return its child component

Now lets implement the shared state functionality between the components.Here the idea is that instead of passing the props to each child component the parent component will pass a common set of props to each child . How this works is let us see by code


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648583912227/yyJp7xYA_.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648583941863/E_U3hr5wX.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648583995039/JdhrMNQjc.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648584025331/uEiTiEniR.png)

Hence from the above code the functionality of common shared state is implemented

Now lets say we have dom elements inside our parent component.But we do not want DOM elements inside our component. We can restrict what components should be present inside the parent function Dhruv

Let us first restrict the DOM elements inside the Dhruv parent component

As the type of the DOM elements is string we can write the following code:
if(typeof child.type=="string")
        {
            throw new Error("The DOM elements are not allowed");
        }
Hence with this code if we mention Dom elements inside the Dhruv component it will generate an error