DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Emon Islam
Emon Islam

Posted on

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" />
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!