Should I import useState and useEffect or is it ok to use React.useState and React.useEffect?

Question

When using hooks for state, effect, context, etc, I do this:

import React, { useState, useEffect, useContext } from 'react';

However, I noticed that the following works just fine:

import React from 'react';

const App = () => {
  const [counter, setCounter] = React.useState();

  React.useEffect(() => console.log('hello!'), []);
}

My question is, is there any difference between those two? Maybe when it comes to bundle size, or is Webpack smart enough to handle that?

Otherwise, is that bad practice? Which approach do you use, and why?

It’s the exact same thing https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import, it’s just one use destructuring assignment. — Alexander Staroselsky, Nov 25 '19 at 06:01

score 4 · Accepted Answer · answered Nov 25 '19 at 06:40

4

its better to use import {useState } from 'react'just because of readability , less typing and clean coding . it doesn't matter in performance and bundle size

answered Nov 25 '19 at 06:40

mansour lotfi

524
2
7
22

score 0 · Answer 2 · answered Nov 25 '19 at 06:13

0

Both are the same, import {useState } from 'react' is less verbose and easy for readability and maintenance.

answered Nov 25 '19 at 06:13

Ajay Ghosh

439
2
11

score 0 · Answer 3 · answered Mar 05 '23 at 05:45

You need React when you want to use JSX.

So if you are doing this in a component where you need to have JSX:

import React from "react";

is the way to go since React already imports the other hooks and its properties. You can simply write is as React.use...

However, if your component (or a custom hook) does not use JSX, then it makes sense to not to import all of React and only the required hooks like useEffect, useState, etc.

import { useEffect, ... } from "react";

I do agree with others about readability but it boils down to personal preference.

Should I import useState and useEffect or is it ok to use React.useState and React.useEffect?

3 Answers3