With the new JSX transform that dropped in React 17, we don't need to write import react from 'react'.
But
If I'm using hooks, I'd anyway be doing, say, import { useState } from 'react' which would include react anyway.
So, is there a benefit of omitting import react from 'react'?
Will it reduce bundle size in this case?
Related
Suppose I have a React app, and I begin a component with the import as follows
import * as React from 'react';
If I then want access to react hooks, is it faster to import them from react again (import { useState, useEffect } from 'react') or to destructure them from the existing React import (const { useState, useEffect } = React).
I imagine, for some, it may not matter much outside of preference, but I want to make the optimal decision with regards to performance.
This question already has answers here:
import * as React from 'react'; vs import React from 'react';
(2 answers)
Closed 3 years ago.
Thoughout our TSX/React web application, we use two different import style for the react module:
import * as React from "react";
and
import React from "react"
I am not aware of any functional difference between the two. Both work just fine. Is there any reason to prefer one notion over the other?
You want to do import React from "react" so you editor can auto change it to import React, { useState } from "react".
As per my knowledge both are same.
import everything from "react" and then we can use it as React in our application
import * as React from "react";
same as
import React from "react";
So as per me you need to use import React from "react";.Because you can directly access React from react npm.
I am trying to implement hooks into a React (^16.6.0) application using TypeScript
import * as React, {useState} from 'react';
Any idea what is the right syntax for this import?
import supports a limited set of syntax variations.
It can be:
import React, {useState} from 'react';
The downside is that entire library is imported, because React is default export and cannot be tree-shaken. Since the presence of React import is needed to use JSX syntax, a more efficient way is:
import * as React from 'react';
import {useState} from 'react';
Hooks were introduced in pre-release React 16.7. react version constraint should be ^16.7.0-alpha.0, #types/react should be ^16.7.0.
I had the same error on "#types/react": "^16.8.17". Looking at it's type def file, it was missing the useState function for some reason, though it was mentioned in the comments of other hooks like useReducer.
Upgrading to "#types/react": "^16.8.18" with npm i #types/react#latest fixed it.
I am going through some react code, can any one please let me know what does default as React in below code does.
import {
default as React,
Component,
PropTypes,
} from "react";
Thanks,
Guru
what is default in react import?
Default in that context is the entire React library. It is unnecessary in this case and could be shortened to import React, { Component } from 'react'
Another thing to note, is that proptypes have been moved to their own package now.
That's the same as:
import React, { Component, Proptype } from 'react';
obs: Since react v15.5 React.PropTypes has moved into a different package
I need to understand when I use a named import like this
import { render } from 'react-dom'
does webpack include in the bundle only the render method or the whole module especially when using tree shaking by setting module to false in babel configuration and let webpack take care about them?
Also in the case of importing react
import React from 'react'
&&
import React, { Component, PropTypes } from 'react'
what's the right way?
Tree-Shaking is applicable for modules which can be statically analysed (to get the entire dependency tree without running the code) -
and it is ONLY for ES2015 Modules and NOT CommonJS(node) modules.
react, react-dom, as of this writing (react#15.4.x), are NOT published as ES2015 modules. So either of these -
import { render } from "react-dom";
or
import ReactDOM from "react-dom";
will result in the entire react-dom being included in your bundle. The same applies for react and other libraries which are published as CommonJS modules or UMD.