Some knowledge of ReactJS
Tags: javascript, react
Published: 2021-12-24 08:12:50

**JSX:**
JSX means JavaScript XML. It is a extension for syntax in JavaScript language. It allows to write HTML like tags in react component where complex coding in JavaScript was needed before JSX. It makes code readability and code structure better. The JSX starts with html like tag and ends with closing tags which get transformed into javascript when building DOM.

**Differences between virtual and real dom:**

- A virtual dom is an abstract lightweight representational copy of HTML dom. 
- The differences between real dom and virtual dom are:
- Virtual dom is an abstract representation copy of real dom, whereas real dom has a memory existence.
- If any changes happen in code, virtual dom gets updated and rendered 1st whereas real dom gets rendered after the comparison between two virtual doms.
- Real dom needs so much memory compared to virtual dom.
- Virtual dom gets rendered quickly compared to real dom.

**Diff algorithm:**
Diff algorithm is an algorithm to which determines the updates of real dom comparing virtual doms. In React, for every change in React document, a new virtual dom is rendered and created rather than rendering the real dom because rendering a real dom, again and again, is performance and memory costly.  As a result, virtual doms are created and the diff algorithm finds the differences between the current virtual dom and the immediate previous dom. After finding out the specific locations of the changes by comparing those doms, the real dom gets updated only on those locations. Not rendering and updating the whole real dom again, virtual doms save a lot of time and performance as well as memory spaces.

**React Component lifecycle:**
Lifecycle was a feature of the class component only and it came to the functional component after the age of hooks through useEffect hook. Each react component has 3 phases in its lifecycle. They are mounting, updating, and unmounting. In phase one, mounting indicates inserting elements into react-dom. Four built-in methods are being called when mounting a component and they are constructor(), getDerivedStateFromProps(), componentDidMount() and render(). After this phase, another phase comes named updating. Whenever there are changes in a component’s functions or props, this updating phase starts. It has some built-in methods which are called when this phase gets activated. After this phase, when the component gets removed from the dom, the last phase called unmounting gets started. It has only one built-in method which is named componentWillUnmount() that gets called during this phase.

**Higher Order Component:**
A higher-order component (HOC) means a complex component used to reuse logic in React components. It has similar behaviour to higher-order functions. A component that accepts more components as an argument of that component and returns a more complex component from before is called a higher-order component. For example, react-router is a higher-order component. 

**ReactJS app optimization:**
To optimize react js app and prevent unnecessary re-render in react js, we can do some certain steps: 

- By using and implementing an immutable data structure.
- By increasing the usage of React.pureComponents() and React.memo().
- By using keys and by avoiding the use of indexes as keys for the mapping which prevents unnecessary re-rendering.
- By avoiding usage of excess objects as much as possible and passing objects through prop or and using dynamic objects.
- By keeping the component’s property value unchanged as much as possible.
- By keeping the dom tree structure unchanged as much as possible.