# interview question answer

https://www.sololearn.com/learning/1097

::advantages of React

Speed
Interactive websites need to update the DOM (Document Object Model) each time a change happens. This process is generally resourceful and slow.
Compared to other libraries that manipulate the DOM, React uses a Virtual DOM, allowing to update only the parts of the website that have changed. This increases the speed of updates dramatically, as modern web applications may contain thousands of elements.

::Functional Components

Notice that the name of the functional component begins with a capital letter. This is absolutely critical. If we start the name of a component with a lowercase letter, the browser will treat our component like a regular HTML element instead of a Component.

::State

In order to allow components to manage and change their data, React provides a feature called state.
State is an object that is added as a property in class components.

::the main differences between props and state:

- We use props to pass data to components.
- Components use state to manage their data.
- Props are read-only and cannot be modified.
- State can be modified by its component using the setState() method.
- The setState() method results in re-rendering the component affected.

::useState hook

useState returns a pair, the current state value and a function, that lets you change the state.

useState takes one argument, which is the initial value of the state.

::Lifecycle Methods

React provides special lifecycle methods for class components, which are called when components are mounted, updated or unmounted.

Mounting is the process when a component is rendered on the page.
Unmounting is the process when a component is removed from the page.

The componentDidMount method is called when a component is rendered on the page.

::componentDidUpdate

Another lifecycle method is componentDidUpdate(), which is called when a component is updated in the DOM.

::useEffect Hook

React provides a special Hook called useEffect to make lifecycle methods available in functional components. It combines the componentDidMount, componentDidUpdate, and componentWillUnmount methods into one.

by default, useEffect runs both, after the first render and after every update.

To call the method only when something changes, we can provide it a second argument:
useEffect(() => {
//do something
}, [count]);

Now, the useEffect() method will run only if count changes.