10 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:
  • 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:
  • 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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to deploy your React Apps on GitHub pages?

Building a Rich Text Editor with React and Draft.js, Part 2.4: Embedding Images

How to Build PEAN Stack for Production — Typescript Version

Setting Up Webpack for JavaScript, TypeScript and using Webpack Server

API Authorization

Creating an app for mac using Electron, React, Express, Rollup, Yarn and Supercollider

How To Write Serverless NodeJS REST API With Azure Functions

What Is Big-O programming?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sagar Biswas

Sagar Biswas

More from Medium

Why do we use React? Here are some of the benefits of using React JS.

React Class vs. Functional Components

Converting a Sorted Array to Binary Search Tree in Vanilla Javascript

React Native Development mistakes to avoid