React Concepts Exploration

A few React JS basic concepts -

PropTypes
PropTypes is a React JS property that checks the type of the value. That means it’s a validator. It specifies the value of the property. When it receives invalid data, then it shows a warning in the JavaScript console.

JSX
JSX stands for JavaScript XML. It is a syntax extension of JavaScript. It allows the developers to write HTML in React JS. It’s actually not HTML, just looks like HTML that gets transformed to JavaScript. And that’s the React JS unique feature.

State-Props
State and Props are the attributes of React JS. The state is used to hold data and manage data. And Props is used to pass data. State data is only usable in the same component where Props can pass the data from parent to child component.

Component Lifecycle
Every React component has a lifecycle that can be monitored during its three phases.

1. Mounting: Mounting means putting elements into the DOM(Document Object Model).
2. Updating: When anything changed in the components, then it re-render the changes.
3. Unmounting: When the components finished their rendering, then it removed from the DOM.

Hooks
Hooks let the developer use state and other React features without writing a class. It is made of pure JavaScript code. It helps us to write DRY code. There are a few hooks in React.
useState
useEffect
useRef
useContext
useReducer
useMemo
useCallback

Custom Hooks
The custom hook is a JavaScript function made by the developer themselves to perform specific tasks depending on their needs. It allows them to write DRY code. React Hooks built-in and provided by React, where custom hook made by ourselves.

Context API
JavaScript is a single-thread language and asynchronous. For this nature in React, data can send only from parent to child. When we need to send data from 4-5 or more layers down, then it is challenging and unorganized to send data by props. To solve this props drilling problem Context API is used. Context API is a component that uses React’s useContext hook and it wrapped every component. Then the Context API is acting as a parent and the other component is children. That’s why, when we need to send data in any component without props drilling it is easy to send data.