Discuss about React

1. JSX in React
Answer: JSX stands for JavaScript XML. It is a syntactic sugar for React.createElement() function. JSX is an inline markup that looks like HTML and gets transformed to JavaScript. It is possible to create HTML elements with JavaScript and place them in specific places of DOM in an organized way with JSX.

2. purpose of useState
Answer: useState is a hook, The purpose of useState is to declare the state inside the functional component.
In the functional component, we use useState. UseState is used to store data into components.
useState returns 2 values inside an array, one is the initial state and the other one is a function That helps the initial state to assign new values.

3. prop drilling
Answer: when we want to pass data from one component to another component as a prop But if there is more component between the source and the destination, the props reach the destination through all the components this process is called props drilling.

4. React lifecycle Component
Answer: React lifecycle method is a sequence of events that happen from birth to death of react component.
Every component of React goes through a life cycle event.
The lifecycle component is derived into three phases Mounting, Updating, Unmounting which means birth, growth, death

5. Purpose of a custom hook
Answer: When you have component logic that needs to be used by multiple elements, Then custom hooks need to be created Which is the purpose of a custom hook.
This is like a normal JavaScript function just "use" the function name at the beginning, it's a convention.
ex:
const useWindowsWidth = () => {
const [isScreenSmall, setIsScreenSmall] = useState(false);

let checkScreenSize = () => {
setIsScreenSmall(window.innerWidth < 600);
};
useEffect(() => {
checkScreenSize();
window.addEventListener("resize", checkScreenSize);

return () => window.removeEventListener("resize", checkScreenSize);

}, []);

return isScreenSmall;
};

6. Virtual dom
Answer: DOM stands for Document Object Model. The DOM represents the HTML document in the tree structure.
A virtual DOM is a copy of the original DOM which is a lightweight JavaScript object. When the state of an object changes, the virtual DOM only updates that object inside the original DOM. The rest of the object does not change.

14. Higher-order component
Answer: A higher-order function(HOC) is a function that takes a function as a prop and returns a new function.
ex:
const withCounter = fn => {
let counter = 0
return (...args) => {
console.log(Counter is ${++counter})
return fn(...args)
}
}

const add = (x, y) => x + y
const countedSum = withCounter(add)
console.log(countedSum(2,3))