extending React.Component vs Component

Question

I just got in a project on React Native, where I constantly see classes extending both React.Component and Component itself.

Examples:

class SomeView extends React.Component

or

class OtherView extends Component

in both of them we are importing React, {Component} from React

Is there any actual difference, if so, which one? Didn't found any info on the web. Cheers!

Possible duplicate of using brackets with javascript import syntax — Mayank Shukla
– Mayank Shukla, Commented Jul 11, 2017 at 10:00
When you do import { Component } from 'react', you are importing React.Component. Meaning that if you, at the beginning of the file, write import React, { Component } from 'react', React.Component refers to the exact same class as Component, making both syntaxes you mentioned valid. — Tadeáš Peták
– Tadeáš Peták, Commented Jul 11, 2017 at 10:00
@TadeášPeták That's exactly what I thought, just needed some confirmation. Thanks! :) — jbarradas
– jbarradas, Commented Jul 11, 2017 at 10:02
There is actually a difference. You may have multiple packages that export a Component. So, extending from React.Component makes clear and explicit which component is being used. — giorgosp
– giorgosp, Commented Apr 27, 2018 at 15:40

João Cunha · Accepted Answer · 2017-12-17 13:27:35Z

24

Well you can do whatever you want really.

Doing import { Component } from 'react' is effectively the same thing as React.Component.

The import { Component } from 'react' syntax is called a Named Import

The import statement is used to import bindings which are exported by another module.

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

edited Dec 17, 2017 at 13:27

answered Nov 13, 2017 at 13:36

João Cunha

10.3k4 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

floriangosse Over a year ago

import { Component } from 'react' is not destructuring. It is a named import.

aviansh k · Accepted Answer · 2017-12-17 09:54:40Z

0

import {Component} from 'react';

This is called named module import.

The module to import from. This is often a relative or absolute path name to the .js file containing the module, excluding the .js extension. Certain bundlers may permit or require the use of the extension; check your environment. Only single quotes and double quotes Strings are allowed.

answered Dec 17, 2017 at 9:54

aviansh k

615 bronze badges

Collectives™ on Stack Overflow

extending React.Component vs Component

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related