React js most important 9 Topic cover 
Published: 2021-12-22 16:15:48

### 1. PropTypes
React proptypes in checking typeof  value 
 ` optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,`


 

### 2. State-props
State 

Props pass to data from react components React’s the data flow between components is uni-directional (from parent to child only)
example: 

```
import React from 'react'
export default function ChildComponent({name,email}) {
   return (
       <>
          	<span>Name{name}</span>
	<span>Email: {email} </span>
       </>
   )
}

<ChildComponent name="Emon"email="abc@gmail.com" />
```


### 3. JSX
JSX meaning javascript XML jsx use vanilla javascript Extension and occasionally referred as JavaScript XML write html in react.
Javascript code JSX compiled into imperative JavaScript code typescript and babel using JSX run time compiled. 

### 4. Component Lifecycle

Each component in React has a lifecycle that can monitor and manipulate component initialisation,  Mounting, Updating, and Unmounting in react lifecycle.

### 5. Hooks

React hooks javascript pure function use react lifecycle Hooks are simply functions that allow you to hook into or make use of React features. 
 react applications in react hooks every day. everyday use in hook list.
`useLocation
useNavigate
useReducer,
useContext
 useCallback 
useMemo
 useRef 
useImperativeHandle
useEffect
useState 
useLayoutEffect
 useDebugValue`

### 6. custom hooks

The purpose of a custom hook. Custom hooks in my application used to need and create hooks for me and then use.
Creating a custom hooks, for example: 
	

```
Import {useState,useEffect} from 'react'
const useProducts = (url) => {
    const [products, setProducts] = useState([]);
    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(data => setProducts(data))
    }, [])
    return [products, setProducts]
}
export default useProducts;

```





### 7. context API

context API in react child to parent and parent to child data sharing to use context API.
Context API shares data globally. Context API does work into creating useContext hook in react to context creating then context children data value provider in contents and all contexts access to children of passing. 


### 8. Virtual DOM and diffing- algorithm

The virtual dom and real dom is the same object of property store, but differences in real dom-manipulation are slow and virtual dom is the very first to manipulate virtual dom.
Virtual dom faster and flexible virtual dom check the property which is changing then changed property only updating real dom. 
Diffing- algorithm when distinguishing between two plants, the reaction first compares the two main components. Behaviour varies depending on the type of root material.

```
<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

```

	

### 9. Optimize the performance of the React application?

using the immutable data structure 

- Zero side-effects
- Immutable data objects are simpler to create, test, and use
- Help prevent temporal coupling
- Easier to track changes
- Components often re-render and API networks many API requests to application slowing so don’t repeat your life-cycle application.
- Use a Production build before deployment.
- Avoid Adding Extra Nodes to the DOM by using React. Fragment
- Immutable Data Structures
- App’s loading time improvement by lazy loading
- Avoid Anonymous Functions