10 things you need to know about react

1. Virtual DOM : DOM stands for document object model .DOM is a representation of the html element of your webpage .Virtual DOM is virtual representation of real DOM. When state of component changes ,the virtual DOM updated and compare the present version with previous one to figure out what actually has been changed .This is call diffing ..After that the parent tree re-render to give the updated UI. Then it updated to real DOM .Virtual DOM faster and efficient than real DOM . Real DOM slow a bit.
2. Virtual DOM: React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, virtual DOM changes only that object in the real DOM, rather than updating all the objects.
3. Can a child component modify its own props? No.
4. Will React hooks work inside class components? NO.
5. What is the significance of keys in React? A key is a unique identifier. In React, it is used to identify which items have changed, updated, or deleted from the Lists. It is useful when we dynamically created components or when the users alter the lists. It also helps to determine which components in a collection needs to be re-rendered instead of re-rendering the entire set of components every time. It increases application performance.
6. Purpose of UseEffect() Hook :The Effect hook lets us to perform side effects in functional components. It helps us to avoid redundant code in different lifecycle methods of a class component. It helps to group related code.
7. What are the different phases of React component’s lifecycle? initial rendering phase , updating phase , unmounting phase.
8. What is HOC ?A higher-order component acts as a container for other components. This helps to keep components simple and enables re-usability. They are generally used when multiple components have to use a common logic.
9. What are pure components ?Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.
10. What is an event in react ? An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizes, and other interactions are called events.
11. React render() function : This method is only require in class base component .Function base component do not have render() method. The purpose of render() is to display the HTML code in particular HTML element.
12. JSX:JSX is java script extension to write HTML code to react .It is stands for java script XML. It allow to write HTML element in java script and place them into DOM . For this you do not need to use createElement() and appendChild() method.
13. useState():This is call Hook . In functional components useState have a state variable and a function which set or update the state . It take a initial state . To use this hook you have import this first , then only can use.
14. useEffect():This is also react Hook . useEffect usually used for fetch the API .useEffect got two agrument one is callback function and another one is dependencies
15. DefaultProps :is a property in React component used to set default values for the props argument. It will be changed if the prop property is passed. Here props is property .So defaultProps is default property ,means it set the default value for props argument. It can be changed if the prop property is passed. So simple right . Props used to data from one component to another component.
16. useReducer : This is one of additional hook of react . This an alternative of useState hook .It is used for update and store states. It has two paramenter ,first parameter is reducer function and second parameter is initial state.
17. Babel:Babel is a compiler which convert the ES6 code to ES5 plain java script code .
18. Context api:Context api use for send data from one component to another component in easier way rather than send throw props .
19. Conditional rendering :Conditional rendering work as same as java script condition.This is the way to render the element or component based on condition.
20. What is state in react ?

State is a JavaScript object that stores component’s dynamic data and it enables a component to keep track of changes between renders.

or

• The state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders.

12.What is react Hook ?

These are in-built functions that allow developers to use state and lifecycle methods within components in React.

OR

Hooks are a new feature added in React v16.8. It allows to use all React features without writing class components. For example, before version 16.8, we need a class component to manage state of a component. Now we can keep state in a functional component using useState hook.

13. Features of react ?

• JSX
• Components
• One-way Data Binding
• Virtual DOM
• Simplicity
• Performance

14.Why can’t browsers read JSX?

Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

15. Can I skip an effect on updates? If you want the useEffect to run only on updates except initial mount, you can make use of useRef to keep track of initialMount with useEffect without the second parameter

16.Why do we need a Router in React? A Router is used to define multiple routes and when a user types a specific URL, if this URL matches the path of any ‘route’ defined inside the router, then the user is redirected to that particular route. So basically, we need to add a Router library to our app that allows creating multiple routes with each leading to us a unique view.

17.Why we use JSX?

• It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.
• Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both.
• t is type-safe, and most of the errors can be found at compilation time.
• It makes easier to create templates.

18.Props vs State?

state:Hold information of components,Child components cannot access,changeable.

States vs Props

ConditionsStateProps1. Receive initial value from parent componentYesYes2. Parent component can change valueNoYes3. Set default values inside componentYesYes4. Changes inside componentYesNo5. Set initial value for child componentsYesYes6. Changes inside child componentsNoYes

19. Differentiate between Real DOM and Virtual DOM.

Real DOM vs Virtual DOM

Real DOM Virtual DOM1. It updates slow. 1. It updates faster.

2. Can directly update HTML. 2. Can’t directly update HTML.

3. Creates a new DOM if element updates.3. Updates the JSX if element updates.

4. DOM manipulation is very expensive.4. DOM manipulation is very easy.

5. Too much of memory wastage.5. No memory wastage.

20.DefaultProps :is a property in React component used to set default values for the props argument. It will be changed if the prop property is passed. Here props is property .So defaultProps is default property ,means it set the default value for props argument. It can be changed if the prop property is passed. So simple right . Props used to data from one component to another component.

21.What is react ?

React is a front-end JavaScript library focused on building a user interface with components.