questions7 react

Question 1

What is JSX?

Answer 1

It allows us to write HTML inside JavaScript and place them in the DOM without using functions like appendChild( ) or createElement( )

Question 2

What are the differences between functional and class components?

Answer 2

Functional components you create with functions and class components with class.
Functional components use React hooks to handle state and lifecycles of this component.

Class components are handle the state as a property of class and they have cycle methods instead of hooks

Question 3

What is virtual DOM?

Answer 3

Virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the real DOM by a library. virtual DOM object as a blueprint of the real DOM object

Question 4

What are the differences between controlled and uncontrolled components?

Answer 4

controlled components are components where we control the value of input with a useState.
In an uncontrolled component, the value of the input element is handled by the DOM itself.

Question 5

What are the different lifecycle methods in React?

Answer 5

Each component in react goes through three phases: Mounting, Updating and Unmounting.

Mounting, that is putting inserting elements into the DOM:
componentWillMount() - before
componentDidMount()/useEffect( function() {}, [ ]) - after

Updating, which involves methods for updating components in the DOM:
shouldComponentUpdate - check if component should be re-rendered
componentWillUpdate - before
componentDidUpdate/useEffect(function() {}) - after

Unmounting, that is removing a component from the DOM.
componentWillUnmount/ useEffect(function() {
// some logic
return function() {} // it's analog of componentWillUnmount
})

Question 6

How to prevent re-renders in React?

Answer 6

Re-rendering of a component and its child components happens when props or state of the component has been changed.
we use the shouldComponentUpdate( ) method To prevent the re-rendering. we have to return false from the shouldComponentUpdate( ) method to prevents component from re-rendering.