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

ES6 Developments

A Mutable Feast: Methods on Arrays of Food and Drink that Hemingway Mentioned in _A Movable Feast_

Proyecto final / Video de animación

Create light dark theme html css js in react

A mistake lots of React developers make almost everyday when using hooks.

Rxjs — be careful with that axe, Eugene

React Native Intro

Progressive Web Apps — The Next Step in Web App Development

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

Dynamic Grid in React

React Details

Using combineReducers in React

React Compositions and Children