10 facts about React js….

People always seek simplicity and flexibility. For developers who want to excel in their JavaScript skills a bit more, mastering React can be the best option for them. Here I tried to discuss some interesting facts about React js.

• While sometimes we consider React as a framework, but it’s actually a library that lets us create interactive UIs. But unlike normal ways of rendering whole elements in DOM, react updates the specific things where necessary. that means no need to re-render everything which leads to performance optimization.
• For the most efficient operation react maintains two virtual DOM. If any change occurs react then compare the latest DOM with pre-updated DOM. Finally, it updates the real DOM with the exact change letting other objects stay as same as the previous version in the DOM. This is actually done by diffing algorithm.
• We use JSX in react js which is a syntax extension to JavaScript. JSX lets us write Html inside the Javascript and vice versa. See the example:

const user = {
firstName: ‘Richard’,
lastName: ‘Pavel’
};

const element = (
<h1>
Hello, {user.firstName + “ “ + user.lastName} </h1>
);

• In the state, data is stored which is belongs to the component. Simply say a state is the database of a specific component that may change over the lifetime of the component leading it to re-render.
• Differences between props and state are quite interesting while props are passed from parent to child(read-only property), the state is components specific, which means it is declared in the components. The state can be Changed inside a component while props can’t be changed.
• React maintains one-way data flow down the component hierarchy which makes it more efficient. So the state should be kept in the common parent so that it can be passed easily. But when it becomes more complex we can use React context API.
• There are three different phases of React component’s lifecycle:
  Mounting: This the time phase when a component is rendered and starts its journey.
  Updating: Depending on the state or props change, a component can re-render in this phase.
  Unmounting: This is the phase when a component is destroyed and removed from the DOM.
• If you want to implement lazy load in React there is an easy and convenient solution that is very easy to implement. Just have a look at the following example:

import React, { Suspense } from ‘react’;

const OtherComponent = React.lazy(() => import(‘./OtherComponent’));

const MyComponent=()=> {
return (
<div>
<Suspense fallback={<div>Data is loading…</div>}>
<OtherComponent />
</Suspense>
</div>
);
}

• In the useEffect hook we can pass different values in the dependency array. And the change of any value causes re-run useEffect again. A clean-up function can also be used that will act as componentWillUnmount leading to less memory consumption.
• In React we can also handle events .but there are two differences here comparing with the normal way we code in normal Html.

-Here we need to use camelCase. Instead of onclick we need to write onClick.

-In normal html we add a event handler like this way , onClick=”handleClick”, but in react it will be onClick={handleClick}

-In case we need to pass parameters in the function then we need to pass these in the following way, onClick={()=>handleClick(‘parameter goes here’)}