React Tag

What’s new actually in React v17.0

It has been two and a half years since React v16 was first released. The dev team promises that update v17 is incredibly important for the future of React but claims that no new features are being added. So what exactly does that mean? And how can React claim to be releasing a major new version without adding new features?

Gradual React updates

Past React updates have always caused deprecations of older versions. This could make it incredibly difficult for teams to upgrade their React versions, especially when working with large or neglected codebases. So, the React team has decided that v17 will lay the groundwork for a new method of adopting updates. When React v18 is released, developers will be able to choose to only upgrade parts of their app and keep other parts running on v17. React advises against this if you’re application is actively maintained or in large-scale production, but it can help teams who don’t actively maintain their application or who don’t need to migrate certain components to the newer version. In the future, new React versions won’t leave these apps behind or demand massive migrations.

To enable this ability, the React team has spent some time reworking the event system. These updates are what caused React v17 to be a major release since it could potentially break many applications.

Events are no longer attached to the document

Contrary to what you might think, React doesn’t attach events to individual elements. Instead, React binds one handler per event type to the document node. This approach increases performance in applications with large element trees and also enables features like replaying events.

In the background, React can capture an event and determine which component to call before propagating the event up the component tree. However, in native Javascript, the event has already propagated to the document level. While this may not sound like an issue, this system breaks when running multiple instances of React. If a React app nested inside of another one has stopped the propagation of the event, the parent React app will still capture the event. This was a major headache for developers looking to nest different versions of React. You may not think that this happens in production, but the Atom code editor encountered this issue four years ago!

React will now attach event handlers to the root node of the React app. This change will allow the safe nesting of React trees within each other. Granted, all React instances will have to be running on version 17 or higher for this to work. This update also means that React apps are easier to embed inside of other frameworks like jQuery. React will now stop events from propagating to jQuery as one would expect.

Optimizing effect cleanup

It is fairly common to return a cleanup function within a useEffect method to stop any code running within the function. In the past, this cleanup function would run synchronously before the next frame was drawn. In reality, most apps don’t require screen updates to be delayed will running cleanup methods. So they will now run asynchronously after React has rendered the next frame. This should result in faster switch times between components. You can still use the useLayoutEffect method to run a cleanup method that blocks the render loop.

No more event pooling

Event pooling is incredibly confusing and doesn’t provide any optimizations on modern browsers. Instead, it can result in some strange bugs when working with multiple components that receive the same event. One event handler might set the event to be null, and thus the other components using the event would run into a null variable error. In short, newer React version will allow event fields to be accessed whenever you need them.

React v17 may not be the feature-packed update React developers were hoping for. It is instead more of a piece-of-mind update. So while we may not be getting cool new components or hooks, these additions will pay off down the road in later updates. You can try React v17 now by running npm install react@17.0.0-rc.0 react-dom@17.0.0-rc.0 in your React project.

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com

What’s new in React Router 6

React Router is by far the most popular library in the React ecosystem. According to npm, it is downloaded about 3.6 million times a week. This number is almost half of React’s 7.6 million weekly downloads. This means that almost every second project that uses React uses React Router.

That’s huge. Almost half of the React projects out there rely on React Router for routing. Chances are, if you have worked with React, you have worked with React Router.
Now with version six in beta and a new release coming soon, we thought it would be interesting to take a dive into what’s new and what has changed in React Router version 6.

React Router is not without controversy

For a library that is so important to the React community, it has gone through a number of iterations and breaking changes. From its first release in 2014, and with every major release, the maintainers of React Router have introduced new features and breaking changes. Some in the React community have complained about the difficulty of upgrading from one version to the next, and have questioned the library’s constant churn.

Many have complained about the difficult upgrades that came with every new major release of the library.

Not everyone needs to upgrade

If your application is working correctly, and you don’t need access to the new features promised in version 6, you can stick with your older version. Don’t feel the need to refactor your old applications to use React Router 6. If it ain’t broke, don’t fix it.

Installation

npm install react-router@next react-router-dom@next

What’s new

So without further ado, let’s take a look at what’s new and what has changed in the latest version of React Router

Routes Replaces Switch

Routes is introduced as a new element in React Router version 6. This new element allows us to easily define nested routes and relative routes, and make it easy to compose complex routes and layouts. In the previous version of the library, we defined Routes inside of a Switch.

The <Routes > is the new <Switch> element now. It is very much similar to <Switch> with some new features.

// old - v5
import { BrowserRouter, Switch, Route } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/users" component={Users} />
      </Switch>
    </BrowserRouter>
  );
}
// new - v6
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

Did that component prop got changed to element?
That brings us to our second highlight.

<Route component> is replaced with <Route element>

If you notice in the above example, in the new version we are passing a react element instead of a component. This is so much better, now we can pass props directly to the element.

// old - v5
<Route exact path="/" component={Home} />
<Route path="/users" render={routeProps => (
    <Users isCustomLayout={true} />
  )}
/>
// new - v6
<Route path="/" element={<Home />} />
<Route path="users" element={<Users isCustomLayout={true} />} />

Routes and Links are relative to their parent

Now, all Route and Link children of a Route are relative to their parent. This makes it a lot easier to build applications with many nested routes and makes it easier to reason about your application’s routing logic.

No more exact and strict props
Yes, you read it right. In v6 all the routes match exactly by default.

// old - v5
<Route exact path="/" component={Home} />
// new - v6
<Route path="/" element={<Home />} />

Relative paths and links
In v6, both paths and links are relative to their parent route. This means we can omit the “/” if we want the relative path.

// old - v5
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
// new - v6
<Route path="/" element={<Home />} />
<Route path="users" element={<Users />} />

If you have used previous versions of React Router, you will immediately notice that we don’t need to use the exact prop anymore. You will also notice that the Link we defined is relative. Instead of passing /customers/:id, we can just use /:id.

What about nested routes then? They just got better.

Easier Nested Routes

Just like your regular react elements we just need to wrap the child route with a parent one.

// old - v5
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
// ....
users.js
import { useRouteMatch } from 'react-router-dom';
const Users = () => {
  const { path } = useRouteMatch();
return (
    <div>
      // you can do something here
      <Switch>
        <Route path={`${path}/:id`} component={UserInfo} />
        <Route path={`${path}/profile`} component={UserProfile} />
      </Switch>
    </div>
  );
}
// new - v6
<Route path="/" element={<Home />} />
<Route path="users" element={<Users />}>
  <Route path=":id" element={<UserInfo />} />
  <Route path="profile" element={<UserProfile />} />
</Route>
// ....

import { Outlet } from 'react-router-dom';
const Users = () => {
  return (
    <div>
      // you can do something here
      // Outlet: This element is used as a placholder for the child route.
      // Which means it will be either <UserInfo /> or <UserProfile />
      <Outlet />
    </div>
  );
}

Object-based routes

Now we can define our routes using the new useRouter hook. This allows you to build your routes using JavaScript objects. Let’s take a look at our previous application, now defined using useRouter.

import {
  BrowserRouter,
  Link,
  Outlet,
  useRoutes
} from 'react-router-dom';

function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    {
      path: 'customers',
      element: <Customers />,
      children: [
        { path: '/', element: <CustomersIndex /> },
        { path: ':id', element: <CustomerProfile /> },
      ]
    }
  ]);

  return element;
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="/1">Customer 1</Link>
      </nav>

      <Outlet />
    </div>
  );
}

You might ask yourself, why does it matter? Why would I want to compose my routes using JavaScript objects instead of JSX? One great use case would be to programmatically build routes, let’s say, based on the directory structure of your application. You could loop through all of the files in your pages directory, and build routes from that.

Smaller Bundle Size

The team behind React Router claims that the new version is a lot smaller than the previous versions. They estimate that it’s about 70% smaller. Smaller bundles mean that your application loads faster, and content to your users faster.

With all these awesome changes, there is also icing on the cake. They have reduced the bundle size by more than 50%.

Pic courtesy: medium.com

Suspense Ready Navigation

The old useHistory hook has been removed and replaced with a suspense-ready navigate API. Now you can use useNavigate to programmatically navigate around your application. They also expose a Navigate component that you can use to redirect your users.

No more history, it’s time to navigate. The useHistory hook is now replaced with the suspense-ready useNavigate hook.

// old - v5
import { useHistory } from 'react-router-dom';
const CustomButton = props => {
  const history = useHistory();
  const handleClick = () => {
    history.push('/users');
  }
  return <button onClick={handleClick}>{props.label}</button>;
}
// new - v6
import { useNavigate } from 'react-router-dom';
const CustomButton = props => {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/users');
  }
  return <button onClick={handleClick}>{props.label}</button>;
}

So that’s it! If you believe that your applications can benefit from smaller bundle sizes, and from suspense ready navigation, we strongly suggest that you upgrade to the latest version.

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com

Using Redux middleware for polling

In the frontend development world, we oftentimes need to have up-to-date data on the client. And to achieve that there are several options at our disposal:

1. WebSockets (WS);
2. Server-Sent Events (SSE);
3. Polling (Short/Long).

While the first to are preferred, polling still is an important tool especially in situations when our backend can’t provide us with WS or SSE. And in this article, we will be reviewing how to use polling with arguably the most widely-used state manager in the JavaScript realm – Redux.

First things first – what polling is and how it’s done

There are two basic types of polling – Short and Long. For the sake of simplicity, we will be reviewing only Short polling. It’s the easiest one to implement – all it does – sends requests from the client-side to the server at a certain fixed interval. For example, let’s say we have a small website that shows the current weather in a selected region. And to keep the client up-to-date we can use the Short polling technique, that is, send client-to-server requests (for weather data) every 30 seconds. And, therefore, approximately (time between responses might differ) every 30 seconds we will be getting new weather data.

Now, let’s see how we can implement polling in React & Redux application. In our examples, we’ll continue working on the weather application and see how it can be realized using different techniques.

Setting the interval on the component mount

The most naive implementation would be by using the “setInterval” function in the “componentDidMount” method (or the “useEffect” hook).

In this implementation, we’re creating the “updateInterval” variable that points to an actual interval function after it’s being initialized in the “componentDidMount” life cycle method. The interval dispatches the “getWeatherData” redux-action every 30 seconds and does so continually while the component is mounted.

class WeatherApp extends Rect.Component {
  updateInterval;
  
  componentDidMount() {
    this.updateInterval = setInterval(() => {
      this.props.getWeatherData();
    }, 1000 * 30); // 30 seconds
  }
  
  componentWillUnmount() {
    clearInterval(updateInterval);
  }

  render() {
    return (
      <div>
        {this.props.weatherData}
      </div>
    );
  }
}

The biggest downside of this approach is that business logic (pulling data) is tight to the view. The other problem is that the “setInterval” function doesn’t wait till the previous action call (from the “setInterval” body) is completed. Therefore, this version can be improved by using the “setTimeout” function, with the help of which we can start each next cycle only when the previous one is completed. Thus, we won’t accidentally run into a situation where we have two (or even more) calls simultaneously (might happen in the case with “setInterval” on when we have small delays between cycles).

Here is our improved version with the use of the “setTimeout” function.

class WeatherApp extends React.Component {
  updateTimeout;
  
  componentDidMount() {
    this.getWeatherData();
  }
  
  getWeatherData = async () => {
    await this.props.getWeatherData();

    this.updateTimeout = setTimeout(this.getWeatherData, 30 * 1000);
  }
  
  componentWillUnmount() {
    clearTimeout(updateTimeout);
  }

  render() {
    return (
      <div>
        {this.props.weatherData}
      </div>
    );
  }
}

We would like to point out that it’s not an actual code from production, just an example. And there is a good chance that async/await won’t be a viable option because the “getWeatherData” function most likely won’t be an asynchronous function – in such instances, we can use callbacks.

Nevertheless, even this improved version is still not good enough because we didn’t resolve the main problem – a tight connection between business logic and the presentation layer. And one of the drawbacks of previous solutions is that the update logic is defined in components thus making it hardly reusable.

Creating custom actions

By creating a custom action that will encapsulate all the “update by timeout” logic in action’s body – we can address the reusability drawback mentioned earlier and untight the connection between layers.

export const initActions = async dispatch => {
  let updateTimeout;
  
  getWeatherDataTimedout = async () => {
    await dispatch(getWeatherData());

    updateTimeout = setTimeout(getWeatherDataTimedout, 30 * 1000);
  }
  
  /** Initialize any other actions */
  
  getWeatherDataTimedout();
}

class WeatherApp extends React.Component {
  componentDidMount() {
    this.props.initActions();
  }
  
  render() {
    return (
      <div>
        {this.props.weatherData}
      </div>
    );
  }
}

Again, it’s a simplified version. And the “initActions” function can be easily extended by adding custom parameters that can be passed from containers and by adding more actions that can be dispatched in the action’s body.

But we should look for another approach if we want to unentangle the “update by timeout” logic from the View as much as possible.

Middleware

One of the ways to achieve that level of disentanglement is to use Redux middlewares.

The concept is quite straightforward – middleware is some sort of a middleman between dispatching actions and actual execution of those same actions in the reducer.

With all that in mind, we can create a middleware for the “getWeatherData”:

const getWeatherDataTimedout = async dispatch => {
  await getWeatherData()(dispatch);

  setTimeout(() => updateMessages(dispatch), 30 * 1000);
};

const getWeatherDataMiddleware = ({ dispatch }) => next => {
  getWeatherDataTimedout(dispatch);

  return action => next(action);
};

But just creating middleware is not enough, it should be “registered” at the global store. To do so we can use the “compose” function inside of the “createStore” as follows:

const store = createStore(
  rootReducer,
  compose(applyMiddleware(/** other middlewares */, getWeatherDataMiddleware))
);

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com

Managing states with Recoil in React application

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone while being compatible with the newest features of React.

While working with react you might have noticed that are different ways to manage the global state management in React. Let’s take look at the options that we have:

Redux

Redux is a predictable state container for JavaScript apps.
It is used by a lot of web apps these days, it allows us to have a global state, register components to it and they will re-render by themselves every time a value they registered to will change.

• Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
• Centralizing your application’s state and logic enables powerful capabilities like undo/redo, state persistence, and much more.
• Redux works with any UI layer and has a large ecosystem of add-ons to fit your needs.

Context API

Context API is another approach that devs take for better management of state within the application.

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

• Scalable from any range of application (small, mid, large)
• Comparatively less complex than Redux
• No need to pass data to the children at each level. Consumer component instance can access all the data provided by the Provider Component at any level.

Recoil

Now that we are already using to above two famous ways of adding global state to our application here comes something new i.e Recoil.

Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components.

• Atoms are units of the state that components can subscribe to. They’re updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of the React local component state. If the same atom is used from multiple components, all those components share their state.
• Selectors transform this state either synchronously or asynchronously. When these upstream atoms or selectors are updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms, and will then be re-rendered when the selectors change.

Demo Time

Let’s try to understand this with a Demo example.
Consider we want to store user data upon login into our application and share between two components,

and . Let’s say if we were to do this with the useState hook we would have to define the useState Hook at both the places i.e inside the Header and Body component we cannot differently share the same state with useState Hooks. But with Recoil, we can easily achieve this.

Let first define an atom which stores the logged-in user Data

pic courtesy: blog.bitsrc.io

In the above example, we have stored the object which has a name in it. It is stored inside our loggedInUserData atom.

Now consider we need to show this name in our

component which looks something like this with help of useRecoilState.

pic courtesy: blog.bitsrc.io

And our component looks something like this, which display the data from the same atom which is used in the header component again with help of useRecoilState

pic courtesy: blog.bitsrc.io

The syntax might look quite similar to useState which we are already used to in react hooks.

As in the above example since the same state is shared between the

component and the if you change the name of logged-in user from the component, then it will change it globally performing or necessary re-renders to update the state.

useRecoilValue(state)

This is one of the important hooks in the Recoil API. This hook will just subscribe to the component to the given Recoil state, it is used to return the value of the given Recoil state.

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. blog.bitsrc.io

Read More

Three ways to use Babel with React

Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript.

What is Babel?

• JavaScript transpiler.
• Initially, the main focus of babel is to convert ECMAScript 2015+ (ES6+) code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.
• Nowadays, Babel is used to convert (transpile) JSX syntax , Typescript , Code Compression, and any syntaxs in proposal stage. For example, arrow function, which are specified in ES6 are converted into regular function declarations.
• Also, Babel provides polyfills to provide support for features that are missing entirely from JavaScript environments. For example, static methods like Array.from and built-ins like Promise are only available in ES6+, but they can be used in older environments if a Babel polyfill is.

There are 4 ways to run babel

1. @babel/cli
2. webpack babel-loader
3. @babel/core
4. @babel/register

@babel/register is often used in Node.js. It makes the babel run dynamically when the require code is executed. Since it’s not popular way to run babel in React, we are not going to deal with @babel/register way.

Create a sample project

Let’s Create sample project.

— Create a directory and package.json

• Let’s create a directory called test-babel-how.
• move to the directory.
• include package.json in the directory by running npm init -y.

mkdir test-babel-how
cd test-babel-how
npm init -y

— Install the necessary packages

• @babel/core : @babel/core package is necessary to execute babel.
• @babel/cli : a built-in CLI which can be used to compile files from the command line.
• @babel/plugin-transform-arrow-functions : compile ES2015 (ES6) arrow functions to ES5.
• @babel/plugin-transform-template-literals : compile ES2015 (ES6) template literals to ES5.
• @babel/preset-react : Babel preset for all React plugins.

npm i @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react

— Create a sample code

• create a src folder and create code.js in the src folder.

test-babel-how
|
 -- node_modules
 -- src
   |
    -- code.js
 -- package-lock.json
 -- package.json

• code.js

const element = <div>babel test</div>; // 1
const text = `element type is ${element.type}`; // 2
const add = (a,b)> a + b; // 3

We are going to:

1. Transpile JSX syntax using react preset.
2. Transpile template literal using template literal plugin.
3. Transpile arrrow function using arrow function plugin.

1. @babel/cli

— run the following command in the terminal

npx babel src/code.js // 1
--presets=@babel/preset-react // 2
--plugins=@babel/plugin-transform-template-literals, // 3
@babel/plugin-transform-arrow-functions

1. Babel command and tells where the code exists src/code.js.
2. We are using a preset @babel/preset-react.
3. We are using 2 plugins @babel/plugin-transform-template-literals & @babel/plugin-transform-arrow-functions.

— Following output in the terminal

 
const element = /*#__PURE__*/React.createElement("div", null, "babel test"
); // 1
const text = "element type is ".concat(element.type); // 2
const add = (a, b) > a + b; // 3

1. JSX syntax is converted to createElement function call.
2. template literal is converted to string with a concat method.
3. arrow function is converted to normal function.

2. webpack babel-loader

— install packages to use webpack

npm i webpack webpack-cli babel-loader

— create a babel.config.js file

const presets = ['@babel/preset-react'];
const plugins = [
    '@babel/plugin-transform-template-literals',
    '@babel/plugin-transform-arrow-functions'
];

module.exports = { presets, plugins };

• Instead of run presets & plugins in the terminal, we make a config file called babel.config.js to specify presets & plugins.

— create a webpackge.config.js file

const path = require('path');
module.exports = {
    entry: './src/code.js', // 1
    output: { // 2
        path: path.resolve(__dirname, 'dist'), 
        filename: 'code.bundle.js',
    },
    module: { // 3
        rules: [{ test: /\.js$/, use: 'babel-loader'}],
    },
    optimization: { minimizer: []} , // 4
}

1. specify a file to do a bundling using webpack.
2. save the result to dist/code.bundle.js file.
3. let babel-loader to handle JavaScript files.
4. webpack compresses JavaScript file by default for optimization. But, let’s not optimize (compressing JavaScript file) to see if output is as expected.

• we use configuration in babel.config.js file.

— run webpack

npx webpack

— dist/code.bundle.js is created with a following output:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
  
  // ...
  // ...  
/* 0 */
/***/ (function(module, exports) {

const element = /*#__PURE__*/React.createElement("div", null, "babel test"); // 1

const text = "element type is ".concat(element.type); // 2

const add = (a, b) > a + b; // 3

/***/ })
/******/ ]);

• // ... part is webpack’s run time code.
• we could find out that same output is generated.

3. use @babel/core directly

• @babel/core is an essential to execute babel and we use @babel/core indirectly using @babel/cli & babel-loader.

— create runBabel.js file

const babel = require('@babel/core'); // 1
const fs = require('fs');

const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8'); // 2
const presets = ['@babel/preset-react']; // 3
const plugins = [
    '@babel/plugin-transform-template-literals',
    '@babel/plugin-transform-arrow-functions',
];
const { code } = babel.transformSync(source, { // 4
    filename,
    presets,
    plugins,
    configFile: false, // 5
});
console.log(code); // 6

1. get @babel/core module
2. get the file code.js to compile
3. set presets & plugins
4. execute babel using transformSync function
5. let not to use babel.config.js configuration file
6. print converted code

— run file

node runBabel.js

• check out the same output in the terminal.

const element = /*#__PURE__*/React.createElement("div", null, "babel test"
); // 1
const text = "element type is ".concat(element.type); // 2
const add = (a, b) > a + b; // 3

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop any custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com

React v16.13.0 – bugfixes and new deprecation warnings

React 16.13.0 contains bugfixes and new deprecation warnings to help prepare for a future major release.

New Warnings

Warnings for some updates during render

A React component should not cause side effects in other components during rendering.

It is supported to call setState during render, but only for the same component. If you call setState during a render on a different component, you will now see a warning:

Warning: Cannot update a component from inside the function body of a different component.

This warning will help you find application bugs caused by unintentional state changes.

In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the setState call into useEffect.

Warnings for conflicting style rules

When dynamically applying a style that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example:

<div style={toggle ? 
  { background: 'blue', backgroundColor: 'red' } : 
  { backgroundColor: 'red' }
}>
  ...
</div> 

You might expect this <div> to always have a red background, no matter the value of toggle. However, on alternating the value of toggle between true and false, the background color start as red, then alternates between transparent and blue, as you can see in this demo.

React now detects conflicting style rules and logs a warning. To fix the issue, don’t mix shorthand and longhand versions of the same CSS property in the style prop.

Warnings for some deprecated string refs

String Refs is an old legacy API which is discouraged and is going to be deprecated in the future

<Button ref="myRef" />

For example, it will fire if you use String Refs together with the Render Prop pattern:

class ClassWithRenderProp extends React.Component {
  componentDidMount() {
    doSomething(this.refs.myRef);
  }
  render() {
    return this.props.children();
  }
}

class ClassParent extends React.Component {
  render() {
    return (
      <ClassWithRenderProp>
        {() => <Button ref="myRef" />}
      </ClassWithRenderProp>
    );
  }
}

Code like this often indicates bugs. (You might expect the ref to be available on ClassParent, but instead it gets placed on ClassWithRenderProp)

You most likely don’t have code like this. If you do and it is intentional, convert it to React.createRef() instead:

class ClassWithRenderProp extends React.Component {
  myRef = React.createRef();
  componentDidMount() {
    doSomething(this.myRef.current);
  }
  render() {
    return this.props.children(this.myRef);
  }
}

class ClassParent extends React.Component {
  render() {
    return (
      <ClassWithRenderProp>
        {myRef => <Button ref={myRef} />}
      </ClassWithRenderProp>
    );
  }
}

Deprecating React.createFactory

React.createFactory is a legacy helper for creating React elements. This release adds a deprecation warning to the method. It will be removed in a future major version.

Replace usages of React.createFactory with regular JSX. Alternately, you can copy and paste this one-line helper or publish it as a library:

let createFactory = type => React.createElement.bind(null, type);

Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM.createPortal

When React 16 was released, createPortal became an officially supported API.

However, we kept unstable_createPortal as a supported alias to keep the few libraries that adopted it working. We are now deprecating the unstable alias. Use createPortal directly instead of unstable_createPortal. It has exactly the same signature.

Other Improvements

Component stacks in hydration warnings

React adds component stacks to its development warnings, enabling developers to isolate bugs and debug their programs. This release adds component stacks to a number of development warnings that didn’t previously have them. As an example, consider this hydration warning from the previous versions:

pic courtesy: reactjs.org

While it’s pointing out an error with the code, it’s not clear where the error exists, and what to do next. This release adds a component stack to this warning, which makes it look like this:

pic courtesy: reactjs.org

This makes it clear where the problem is, and lets you locate and fix the bug faster.

Notable bugfixes

This release contains a few other notable improvements:

• In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to shouldComponentUpdate. This shouldn’t affect most code, unless you have side effects in shouldComponentUpdate. To fix this, move the code with side effects into componentDidUpdate.
• In Strict Development Mode, the warnings for usage of the legacy context API didn’t include the stack for the component that triggered the warning. This release adds the missing stack to the warning.
• onMouseEnter now doesn’t trigger on disabled <button> elements.
• ReactDOM was missing a version export since we published v16. This release adds it back. We don’t recommend using it in your application logic, but it’s useful when debugging issues with mismatching / multiple versions of ReactDOM on the same page.

React Installation

React v16.13.0 is available on the npm registry.

To install React 16 with Yarn, run:

 yarn add react@^16.13.0 react-dom@^16.13.0 

To install React 16 with npm, run:

 npm install --save react@^16.13.0 react-dom@^16.13.0 

We also provide UMD builds of React via a CDN:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

For more Information and to build a website using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using React JS, please visit our technology page.

Content Source:

1. reactjs.org

What is a Decorator in JavaScript?

When you write a class in JavaScript, you might have had to add more features to the methods in a class. But sometimes they look quite nasty and messy.

How can you make the process more elegant? In this post, we will talk about a promising feature, a decorator.

Before Reading

This feature isn’t included in the newest ECMA-262, JavaScript in other words. You should always use Babel to use this in your project.

The examples I’ve attached to this post were written in JSFiddle, with the Babel + JSX configuration. If you want to use this feature in your project, you ought to set up Babel on your own.

Without a Decorator

class Medium {
  constructor(writer) {
    this.writer = writer;
  }

  getWriter() {
    return this.writer;
  }
}

There’s a class, Medium, that takes the name of the writer in its constructor. And there’s a function that returns the writer’s name.

Let’s create a property that is of Medium type.

const medium = new Medium('Jane');
const fakeMedium = {
  writer: 'Fake Jane',
  getWriter: medium.getWriter,
};

medium is created using Medium‘s constructor function, unlike fakeMedium which is an object literal. But it has the same properties as medium.

Now, let’s compare the result of getWriter from each.

medium.getWriter(); // Jane
fakeMedium.getWriter(); // Fake Jane

Why are the values different?

It’s because JavaScript’s normal function this is bound to the object that actually invokes the function.

medium.getWriter() is called by the medium object, however, fakeMedium.getWriter() is called by fakeMedium. So, the this inside the function, getWriter, looks up the value from fakeMedium.

This article outlines the difference between normal functions and arrow functions.

To get the same result as when medium.getWriter is called, let’s use Object.defineProperty. What Object.defineProperty does is define new properties on the object or modify the existing properties on the object and then it returns the object.

const fakeMedium = { ... };
let isDefining;
let fn = fakeMedium.getWriter;
Object.defineProperty(fakeMedium, 'getWriter', {
  get() {
    console.log('Access to getWriter');
    if (isDefining) {
      return fn;
    }
    isDefining = true;
    const boundFn = this.getWriter.bind(medium);
    isDefining = false;
    
    return boundFn;
  }
});

Whenever fakeMedium.getWriter is called, Access to getWriter will be printed twice. But why twice?

1. When you call fakeMedium.getWriter(), its getter-mode is detected and runs the customized get method.
2. Inside the get method, the getWriter is newly bound by medium – this.getWriter.bind(medium). Here, this refers to fakeMedium itself. So it’s the same as fakeMedium.getWriter.bind(medium). That’s why its get is called once again.
3. But before the function is bound, isDefining is set to true, so the codes under the if-condition won’t be executed until isDefining is set back to false again.

But this way is really a pain in the neck. Because every time you make a new instance of Medium, you should do this again.

Can’t we do this in a more elegant way?

With a Decorator

Any function can be a decorator. Basically, you can use a decorator for either a class or a method in a class. It takes three arguments – target, value, and descriptor.

function decorator(target, value, descriptor) {}

1. target refers to either the class or a prototype of the class.
2. value is undefined for a class and is the name of the method for a method.
3. descriptor is an object that contains definable properties on an object – such as configurable, writable, enumerable, and value. It’s undefined for a class.

function autobind(target, value, descriptor) {}
class Medium {
  ...
  @autobind
  getWriter() {
    return this.writer;
  }
}

A decorator is used with an at sign (@), with the name of the function that you’ll use as a decorator — and it takes three arguments as we just explained.

function autobind(target, value, descriptor) {
  const fn = descriptor.value;
  
  return {
    configurable: true,
    get() {
      return fn.bind(this);
    }
  }
}

descriptor.value is the name of the function on which you put the decorator function – in this case, it’s getWriter itself.

Note that the return value of autobind is a new object, then getWriter adopts the return value to its environment.

What’s good about using decorators is that they are reusable. All you need to do after defining the decorator function is merely to write @autobind on functions.

Here’s another example of making class member properties read-only, which is even easier.

function readonly(target, value, descriptor) {
  descriptor.writable = false;
  return descriptor;
}
class Medium {
  @readonly
  signUpDate = '2019-04-23';
}
const medium = new Medium();
medium.signUpDate; // 2019-04-23
medium.signUpDate = '1999-11-11'; 
medium.signUpDate; // 2019-04-23
^ The value isn't changed!

This time, the descriptor of the property has been changed by setting the writable property as false and that is all. Dead simple. Right?

Full Code Comparison

Here’s the comparison of the full code.

class Medium {
  constructor(writer) {
    this.writer = writer;
  }

  getWriter() {
    console.log(this.writer);
  }
}

const medium = new Medium('Jane');
const fakeMedium = {
  writer: 'Fake Jane',
  getWriter: medium.getWriter,
};

medium.getWriter(); // Jane
fakeMedium.getWriter(); // Fake Jane

/* Do auto-binding job for the same values */
let isDefining;
let fn = fakeMedium.getWriter;
Object.defineProperty(fakeMedium, 'getWriter', {
  get() {
    if (isDefining) {
      return fn;
    }
    isDefining = true;
    const boundFn = this.getWriter.bind(medium);
    isDefining = false;
    
    return boundFn;
  }
});

medium.getWriter(); // Jane
fakeMedium.getWriter(); // Jane

function autobind(target, value, descriptor) {
  const fn = descriptor.value;
  
  return {
    configurable: true,
    get() {
      return fn.bind(this);
    }
  }
}

class Medium {
  constructor(writer) {
    this.writer = writer;
  }
  
  @autobind
  getWriter() {
    console.log(this.writer);
  }
}

const medium = new Medium('Jane');
const fakeMedium = {
  writer: 'Fake Jane',
  getWriter: medium.getWriter,
};

medium.getWriter(); // Jane
fakeMedium.getWriter(); // Jane

Try it out by yourself!

Conclusion

A decorator is very useful, powerful, amazing, and remarkable. Honestly, we don’t see any reason to say no to use this awesome feature.

But, remember that it’s still at stage 2 and the way we used this in this post is more like Babel’s style, not the currently proposed one at stage 2. So, things might be different, like how to use it or what you can actually do with it.

So, we absolutely recommend you use this feature with the appropriate Babel configurations for your project but we also want to mention to keep an eye on this feature in TC39.

For more information and to develop your web app using front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.

Content Source:

1. medium.com

New Features In ES2020

ECMAScript has grown to be one of the world’s most widely used general-purpose programming languages. ECMAScript is based on several originating technologies, the most well-known being JavaScript (Netscape) and JScript (Microsoft). Here are the new features of ES2020.

Dynamic Import

Now, you can import a file dynamically.

import { max } from '../math.js';
const nums = [1, 2, 3];
max(...nums); // 3

This has been the way we could import a file. And the JavaScript engine reads the modules in the file and bring them into the file where those modules are called. But now, you can do this as follows.

const numbs = [1, 2, 3];
if (numbs.length) {
  const math = '../math';
  import(math)
    .then(module => {
      module.max(...numbs);
    })
}

A dynamic import returns a promise. Which means you can write it this way as well.

const math = '../math.js';
const module = await import(math);
module.max(...numbs);

Why this feature is good is that you can use a dynamic import in a regular JavaScript code like the example above.

Here’s the browser support for Dynamic Import.

• Chrome: 63
• Edge: No Support
• Firefox: 67
• IE: No Support
• Opera: 50
• Safari: 11.1

BigInt

When you had to add two numbers that are too big enough to cause an overflow, weren’t you suffered?

Number.MAX_VALUE * 2 // Infinity

BigInt is a savior in this case.

You can make a BigInt by calling BigInt() with parenthesis or 2n with ‘n’ at the end of a number.

const num = 2;
const bigNum = BigInt(num);
bigNum; // 2n
bigNum === 2n; // true

You can also add, subtract, multiply and divide it.

const bigN = BigInt(10);
bigN + bigN; // 20n
bigN * 3n; // 30n
bigN - BigInt('55'); // 45n
bigN / 3n; // 3n

Note that bigN / 3n returns 3n , not 3.33333n. Because as you also can assume from its name, it only handles the integers. So bigN / 3n is similar to Math.floor(10 / 3).

However, unfortunately, you can’t make a BigInt with a float number. And also, you can’t use a BigInt and a Number together, either.

BigInt(3.3); 
// Uncaught RangeError 
BigInt('3.3');
// Uncaught SyntaxError
BigInt(1) + 1;
// Uncaught TypeError
// Cannot mix BigInt and other types

Instead, the only allowed case to mix the operations is when you compare the size of the operations.

BigInt(1) < 2 // true

And a BigInt can be evaluated like a Number if it’s in if condition.

function print(n) {
  if (BigInt(n)) {
   console.log('hi');
  } else {
   console.log('bye');
  }
}
print(1); // hi
print(0); // bye

Here’s the browser support for BigInt

• Chrome: 67
• Edge: No Support
• Firefox: 68
• IE: No Support
• Opera: 54
• Safari: No Support

Promise.allSettled

This is quite similar to Promise.all , but there’s a significant difference between them. Promise.all waits for all the promises being fulfilled or an any promise being rejected. On the other hand, Promise.allSettled doesn’t care about that. What it cares is to know if all the promises are done, whichever their status is. So every input promise could be fulfilled or rejected, but it doesn’t matter to Promise.allSettled . Just all of them have to be done.

const promises = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3)
];

const onResolve = (data, prefix) => {
  console.log(prefix, 'Resolved with', data);
};

const onReject = (err, prefix) => {
  console.log(prefix, 'Rejected with', err);
};

Promise.all(promises)
  .then(onResolve.bind(null, 'all'))
  .catch(onReject.bind(null, 'all'));

// Result:
// all Rejected with 2

Promise.allSettled(promises)
  .then(onResolve.bind(null, 'allSettled'))
  .catch(onReject.bind(null, 'allSettled'));

// Result:
// allSettled Resolved with
// [
//   {
//     "status": "fulfilled",
//     "value": 1
//   },
//   {
//     "status": "rejected",
//     "reason": 2
//   },
//   {
//     "status": "fulfilled",
//     "value": 3
//   }
// ]

This might be quite useful when you want to do some works before some action, for example, getting all of the required data before the user sees the list page. But the user could see the empty items because the fetch might be failed.

Here’s the browser support for Promise.allSettled.

• Chrome: 76
• Edge: No Support
• Firefox: 71
• IE: No Support
• Opera: Unknown
• Safari: Unknown

globalThis

This is lit. It’s dead simple and easy to use.

globalThis refers to the global this context on which your running context is. If you’re on Browsers, globalThis will be this , if you’re on Node, globalThis will be global . Hence no need to think about the different environmental issues anymore.

// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window

And this is how it works under the hood, but don’t use it in your code!

var getGlobal = function () { 
  if (typeof self !== 'undefined') { return self; } 
  if (typeof window !== 'undefined') { return window; } 
  if (typeof global !== 'undefined') { return global; } 
  throw new Error('unable to locate global object'); 
};

Here’s the environmental support for gloablThis.

• Chrome: 71
• Edge: No Support
• Firefox: 65
• IE: No Support
• Opera: No Support
• Safari: 12.1
• Node: 12

For more information and to design a website using front-end technology, Hire Front-End Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.

Content Source:

1. medium.com

Top 5 best practices to write more robust JavaScript

JavaScript is the standard technology for implementing a seamless interaction between a user and the web page. Almost all modern browsers support it. It is the main technology behind driving the modern UX and/or server-side frameworks such as Angular, Node.JS and ReactJS. Here are top 5 best practices to write more robust JavaScript.

1. Use factory functions

If you don’t know what a factory function is, it’s simply a function (that isn’t a class or constructor) that returns an object. This simple concept allows us to take advantage of JavaScript and its features to create powerful robust applications.

It’s important to know that they’re no longer factory functions when they’re called with the newkeyword.

Why factory functions?

Factory functions can be used to easily produce instances of objects without having anything to do with classes or the new keyword.

What it essentially means is that they ultimately become treated as just functions, which means they can be used to compose objects, functions, and even promises. This means you can mix and match factory functions together to create an enhanced factory function, then continue composing with other functions or objects to create even further enhanced ones. The possibilities are endless.

When we take that into consideration and combine it with good code practices, it really begins to shine.

Here is a simple example of a factory function:

function createFrog(name) {
  const children = []
  return {
    addChild(frog) {
      children.push(frog)
    },
  }
}
const mikeTheFrog = createFrog('mike')

When you’ve used factory functions enough, you begin to realize that compared to its class constructor counterpart, it promotes stronger reusability. This results in less code, an easier time refactoring since factory functions ultimately return arbitrary objects, and an easier time managing one code to another.

2. Add methods on the .prototype when writing constructors

If you’re new to JavaScript, this section might be a little new to you as it was for me for the first two years of my experience with JavaScript.

(Keep in mind that this does not apply to classes because classes already attach methods onto their prototypes.)

Here’s an example of a constructor:

function Frog(name, gender) {
  this.name = name
  this.gender = gender
}

Frog.prototype.leap = function(feet) {
  console.log(`Leaping ${feet}ft into the air`)
}

Why do this instead of directly attaching the leap method, like in the example below?

function Frog(name, gender) {
  this.name = name
  this.gender = gender
  
  this.leap = function(feet) {
    console.log(`Leaping ${feet}ft into the air`)
  }
}

When we attach methods directly on the prototype, they get shared among all instances created by the constructor.

In other words, using the last example, if we created three separate Frogs (from this.leap = function() {…}), then we end up creating three separate copies. This is a problem because the leap method will always stay the same and doesn’t need to have its own copy to its instance.

Ultimately, this results in lower performance, when it could have been avoided. The this.name and this.gender properties need to be defined on the instance because in real life, frogs probably have their own names and gender so it makes sense to have them created on the instance level.

Here’s an example on GitHub of this approach used by the popular request package.

3. Use the conventional .type property when differentiating

This practice works so well that it’s in extensive use today. If you’re a React developer, you’ve probably already been seeing this every day, especially when you’ve been working with Redux.

Using similar approaches also makes it extremely easy for you in your development flow since it even documents itself extremely well:

function createSpecies(type, name, gender) {
  if (type === 'frog') {
    return createFrog(name, gender)
  } else if (type === 'human') {
    return createHuman(name, gender)
  } else if (type == undefined) {
    throw new Error('Cannot create a species with an unknown type')
  }
}

const myNewFrog = createSpecies('frog', 'sally', 'female')

4. Use TypeScript

TypeScript has become widely adopted in the JavaScript community due to its ability to provide a strong defense for type safety as well as its ability to help us catch bugs before they even occur.

Using TypeScript will enable your compiler to detect and show warnings about any potential errors in code before the code even runs.

But that’s not even close to a complete list of reasons why adopting TypeScript is good for any situation. One of the best things about TypeScript is that it allows you to use new features in JavaScript before they’re supported by major browsers since they get compiled down to earlier versions of JavaScript, ultimately being able to run in old browsers.

5. Always consider using try/catch when using JSON.parse or JSON.stringify

In JavaScript, when we pass JSON as input to the JSON.parse method, it expects a properly formatted JSON as the first argument. If it’s formatted incorrectly, it will throw a JSON parse error.

The danger coming from JSON parse errors is that receiving invalid JSON crashes your app. We’ve recently been in a situation at work where one of our web projects was failing because another internal package did not wrap a JSON.parse in a try/catch. This ended up making a web page fail, and there was no way to get past this error unless the internal package fixed it. This happened because the JavaScript runtime was broken.

SyntaxError: Unexpected token } in JSON at position 107

You shouldn’t always expect valid JSON input as it can receive weird characters like the >character, which is not uncommon today.

For more information and to design a website using front-end technology, Hire Front-End Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.

Content Source:

1. medium.com

ES6 Array Destructuring

In our previous blog post, we learned about “Object Destructuring”. Next, in this post let’s take a tour of “Array Destructuring”.

Array destructuring works the same as object destructuring but instead of using name to identify the property as in object destructuring, we identify it by position in array starting with position zero.

ES5 Code:

const months = ["January", "February"];
console.log(months[0]); // January
console.log(months[1]); // February

ES6 Code:

const months = ["January", "February"];
const [firstMonth, secondMonth] = months;
console.log(firstMonth); // January
console.log(secondMonth); // February

As you can see, the value from the array months with index 0 get assigned to firstMonth variable and index 1 value will be assigned to secondMonth variable.

If we want only the first value we can also do that as

const months = ["January", "February"];
const [firstMonth] = months;
console.log(firstMonth); // January

But what if we want only second month and don’t want to create variable firstMonth if we are not using it. we can skip it as shown below.

const months = ["January", "February"];
const [,secondMonth] = months;
console.log(secondMonth); // February

Note, there is comma before the secondMonth variable which will allows us to skip the creation of variable. So if we want to get the 3rd element of the array we can add one more extra comma.

const months = ["January", "February", "March"];
const [,,thirdMonth] = months;
console.log(thirdMonth); // March

We can also assign the default value if the value does not exists.

const months = [];
const [ firstMonth = "January" ] = months;
console.log(firstMonth); // January

Suppose you want to swap 2 numbers.

ES5 Code:

let x = 10, y = 20;
let temp;
// Swap the x and y
temp = x;
x = y;
y = temp;
console.log(x, y); // 20 10

ES6 Code:

const [y, x] = [10, 20];
console.log(x, y); // 20 10

We can also use the rest operator which is three dots combined with array destructuring.

const months = ["January", "February", "March"];
const [firstMonth, ...restMonths] = months;
console.log(firstMonth); // January
console.log(restMonths); // ["February", "March"]

We can extend this further also.

const months = ["January", "February", "March", "April"];
const [firstMonth, secondMonth, ...restMonths] = months;
console.log(firstMonth); // January
console.log(secondMonth); // February
console.log(restMonths); // ["March", "April"]

Now we will look into some complex examples of destructuring.

Example 1:

const users = [ 
 {
  name: 'David',
  age: 20
 },
 {
  name: 'Billy',
  age: 40
 },
];

Now, suppose we want to get the first user object.

const [firstUser] = users;
console.log(firstUser); // {name: "David", age: 20}

What if we want to get the name from the first user object?

const [{ name }] = users;
console.log(name); // David

First to get the 1st object of the array, we used the following.

const [firstUser] = users;

Now from that object we want name property, so we use object destructuring syntax where the variable name has to match the property name of the object so we destructured it as

const [{ name }] = users;

Example 2:

Now consider we have visitedCountries object.

const visitedCountries = {
 countries: ["USA", "JAPAN"]
};

How can we get the first country from the list of countries?

const { countries: [ firstCountry ] } = visitedCountries;
console.log(firstCountry); // USA

and how to get the second country?

const { countries: [ , secondCountry ] } = visitedCountries;
console.log(secondCountry); // JAPAN

Example 3:
Consider, we have a user’s array. Each array represents the name, country, age.

const users = [
 ["David", "USA", 30],
 ["Billy", "Japan", 35],
 ["Mike", "Singapore", 50]
];

How can we convert it to an array of objects as shown below?

const convertedUsers = [
  {
    "name": "David",
    "country": "USA",
    "age": 30
  },
  {
    "name": "Billy",
    "country": "Japan",
    "age": 35
  },
  {
    "name": "Mike",
    "country": "Singapore",
    "age": 50
  }
]

We can use the map method and array destructuring here.

const convertedUsers = users.map(function([name, country, age]) {
 return { name: name, country: country, age: age };
});
console.log(convertedUsers);
/* output
[
  {
    "name": "David",
    "country": "USA",
    "age": 30
  },
  {
    "name": "Billy",
    "country": "Japan",
    "age": 35
  },
  {
    "name": "Mike",
    "country": "Singapore",
    "age": 50
  }
]
*/

As you can see from the above code.

return { name: name, country: country, age: age };

the key and value are same, so we can further simply it using ES6 Object Shorthand syntax as

const convertedUsers = users.map(function([name, country, age]) {
 return { name, country, age };
});

This is still taking three lines of code so we can further simplify it using arrow function as

users.map(([name, country, age]) => ({ name, country, age }));

Here we are implicitly returning the object { name, country, age } by adding it inside the round brackets ().
The output is same as above but its easy to understand and will save from typing some extra characters.

For more Information and to build a website using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using React JS, please visit our technology page.

Content Source:

1. medium.com