Some Important Concepts of REACT.js

Collected from google

Today we will be talking about some basic and important topics of React. So, what are those topics? State&Props, JSX, and most importantlyDiff algorithm.

State & Props: What is state and what are props? Some might get confused about the difference between state and props. So, here I am to clear out the confusion.

State is nothing but a plain JavaScript object that holds information about the current situation of a component. State in react is mutable. That means State in react can change over time by the interaction of the users.

const Home = () => {
    Const [componentState, setComponentState] = useState(true);
    return (
        <h1> Hello Wolrd!</h1>
    );
};

Here is an example of a state in React. We need to call the useState() hook to use state in react functional component.

On the other hand, props are also objects, holding information but props are used to pass information from one component to another component. props is the short form of property. As, in react, data flows in one direction, from parent to child, also we can say that props is used to send information/ data from parent to children.

const Home = (props) => {
    return (
        <h1> Hello Wolrd!</h1>
    );
};

Here is an example of props in React. Whenever we call the Home component we pass property to the Home component and we accept it as it is shown above.

JSX: JSX is the syntax extension of JavaScript. It is the abbreviation of JavaScript XML. JSX helps us write or create elements in react. It is the syntactic sugar of React.createElement() function that helps us to create elements way much easier than the createElement function. If we wanted to create an element without JSX we need to write like this:

const element = React.createElement(‘h1’,
    {className: ‘greeting’},
    ‘Hello, world!’
);

But using JSX we just need to write

const element = <h1>Hello, world!</h1>;

Virtual DOM & Diff Algorithm: Virtual DOM is the main reason react works so faster. For every DOM object on the client-side, react creates a virtual DOM. Whenever there are any changes in UI, react makes changes in the virtual DOM. Then react performs a check on the DOM between before change and after the change. Then it finds out which components or elements were changed and then it only updates the changed components or elements in the actual DOM. The checking between two virtual DOM is done by an algorithm which is called Diff algorithm. It is a super-fast algorithm that makes react super fast. This checking and updating state or props is called reconciliation. This diff algorithm has a time complexity in the order of O(n3) where n is the number of elements in the DOM tree.