React JS Important Things
Tags: react
Published: 2021-12-22 17:34:43


**Prototypes**
Components type checking of values used PropTypes. When we pass props to a child component that time we can check the type of value. Supposed, props should be passed a number but given a mistake pass a string that time gets the error of the website. So we can type checking by propTypes for checking type of data values. If the data type is wrong then get the warning from the console. Many data type checking by propTypes—

- propTypes.symbol
- propTypes.bool
- propTypes.array
- propTypes.string
- propTypes.object
- propTypes.func
- propTypes.number
 
**JSX**
JSX stands for JavaScript XML. It is a syntax extension of JavaScript which allows the direct HTML code in React. It is very easy to make a template using JSX in React. We write the code in react components. These statements are JSX.
 
**Context API**
Context api is like that store of state that is set in the tower of components. If any component needs data that time, importing the state from context can use data. We can’t pass child components to parent component data. So context API helps the usage data child component to any component.
 
**React Props**
When we call a child component in a parent component that time we pass data to the child component by props passing. Props bare object or any type value. We pass the state date to the child component by props. Props means properties. Example, we have a parent component named “Person”. From here we pass name and age data to the child component “Student” by props. These props are “name” and “age”. Props are mutable.
 
**React State**
State is an object of a component. We can store our component data in the state. We can change the data of the state. State holds the data of the component and it changes by the render of the component. Example, first we create a state like that—
const [count, setCount] = useState(0);
here we define state initial value 0. Then we create a function and this function implements the state increment value. So the state will be changed if the increment function is called. Here count is a variable of state and setCount is a setter function of state. State is immutable.
 
**Hooks**
Hooks are new features in React functional components. It wasn't used in class. Hooks are default features in react like that are methods. Many hooks have react built in.

- useState()
- useEffect()
- useParams()
- useContext()
- useRef()
- useReducer()
- useMemo()
 etc. We can create our custom hooks. Hooks like that a function and in the function create a state then return the state of the function. Then which component needs the custom hook that time it uses import in the component. Custom hook example— import React, {useState} from ‘react’; const useAuth = () =>{ const [user, setUser] = useState({}); return {user, setUser}; } export default useAuth;
 
**Virtual DOM**
Virtual DOM is a copy of Real DOM. That represented the React Tree elements. When changing a tree virtual DOM rendering that tree just for rendering. Its DOM manipulates faster and No memory wastage.
 
**Component Lifecycle**
Every component has several life cycles that are rendered at a particular time in the process. React let’s defined components as classes or functional. I give you examples of functional component basis life cycle methods. React functional components have a function that creates a section of a web page. Components have state to hold data. When changing the state that time the whole component will render. The component can call another child component for displaying state data passed by props. Components have all statements that are JSX statements that look like HTML. It is easy to create HTML templates by JSX (JavaScript XML).
The list of methods in a component life cycle—

- JSX
- useState
- useEffect
- Props