Some Important Topics of React

JSX

JSX stands for javascript XML. It looks like HTML but it comes with the full power of Javascript.JSX allows us to write HTML code in React and convert HTML code into React elements. we don’t need to use appendChild() or ceateELement() method to put HTML element in DOM.

Virtual Dom & React
We can say virtual DOM is a copy of a Browser DOM. Virtual DOM is a virtual representation that is saved in memory and linked up with Browser DOM with ReactDOM.
The main difference between virtual DOM and Real DOM is that real DOM directly changes the content of the screen and virtual does not change any screen content it only changes the specific content of REAL DOM. Virtual DOM wastes less memory But Real DOM waste too much memory. Manipulation in REAL DOM is very expensive because it reloads the whole DOM But Virtual DOM manipulation is less expensive.

Props and State
state is mutable other hand Props are immutable
Props are used to pass data other hand state is managed within components.
Props are read-only and state can be changed
state does not make components reusable and Props make components reusable.

React Hooks
Custom hook allows us to reuse functions made by me. When I need a function that will be reused in many components, then we can get those functions extracting custom hooks. Here reusable function and hook are made by me not built-in hook or function.
example:
import react from “react”
const useCustomHook =()=>{
Here we can create our common function for component re use
}
export default useCustomHook

Optimize a react js application

Use state where necessary: We should avoid state passing down as a prop.
By Memoizing and Preventing unnecessary rendering
By using React.memo() or useMemo() we can avoid unnecessary re-rendering
By avoiding rendering all images at once we can also optimize react app . this called lazy loading images