React js most important 9 Topic cover

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