10 Basic Concepts of React
Learn about React
Virtual Dom:
React creates a replica of the Dom to work on its own, and this is called the Virtual Dom.
Diffing Algorithm:
If any state of the Virtual DOM changes, React creates two states of the Virtual DOM. The state before and after the change. React simply compares the two states, and uses a very efficient algorithm to decide which places have changed. This algorithm is called Diffing Algorithm.
JSX:
It stands for Javascript XML.
It allows writing HTML in React.
It is faster because it performs optimization while compiling code to Javascript.
It makes it easier and faster because it is familiar with HTML.
Components:
Components are like Javascript functions that return HTML elements. Components prefer independently split the UI and reusable for another purpose. It can access arbitrary input (props).
Components have two types:
- Class Components.
2. Function Components.
State:
A state is an object that is used to store values and it belongs to the components. When the state changes, the component responds by re-rendering. setState() method is used for update to a component’s state.
Conditional Rendering:
Conditional rendering is used for conditionally showing components or text. It solved to display conditions-based work.
Context:
Context is storage like session storage that can keep data and any component can accept this data.
At first, create a context.
Then used context data from any components.
propTypes:
propTypes used for validating data to receiving from props. It used more in larger Apps. It is always a good practice for a programmer to validate data getting through props. This will help in debugging and also helps in avoiding bugs in the future.
creating default props:
validating prop types:
defaultProps:
It can be defined default property on the component. If for some reason the property does not acceptable then the default property is executed.
React Hooks:
Hooks are the new feature in React. It allows using state and other features without creating a class. Some Hooks are given below:
Basic Hooks:
1. useState. (for declaring state)
2. useEffect. (for loading data with dependency)
3. useContext. (like a temporary storage, for accessing data from any components)
Additional Hooks:
1. useReducer.
2. useCallback.
3. useMemo.
4. useRef.