CODEWITHSUNDEEP
javascriptreactjsimport
Dominik
Dominik

Reputation: 437

How does import work with react?

My broader question is does an import of a module get shared between two components and why?

First what do I know about import. You can import in two different ways.

1. At the top of your file which loads the imported module into a variable which you then can use.

import Highcharts from './highcharts'
// create a chart
Highcharts.Chart()

2. Or dynamically anywhere in your code which returns a promise:

import('./highcharts').then((response) => {
  // create chart
  response.Chart();
});

But there is this weird behavior I don't understand when using import with react. If I have the following component:

import React, {Component} from 'react';
import Highcharts from 'highcharts/js/highcharts';

export default class Chart extends Component {
  state = {
    chartOptions: {
      // my chart options and data
    }
  }

  componentDidMount() {
    if(this.props.extendFunc) {
      import('highcharts/js/modules/funnel.src.js').then((funnelModule) => {
        funnelModule(Highcharts)
      })
    }
    Highchart.Chart('myChart', this.state.chartOptions)
  }

  render() {
    <div id="myChart" />
  }
}

I use the component from above twice. Now there is this behavior that both components use the same import e.g. the import of Highcharts does not happen twice. I noticed this because with Highcharts there is the option of extending the functionality.

If I for example extend the functionality for Chart 1 by passing a prop to extend it, the functionality of Highcharts is also extended in Chart 2, although I didn't pass a prop to extend the functionality.

import React, {Component} from 'react';
import Chart from './Chart';

export default class Dashboard extends Component {
  render() {
    return (
      <div>
        <Chart extendFunc={true}> Chart 1 </Chart>
        <Chart> Chart 2 </Chart>
      </div>
    )
  }
}

What causes this behavior? Is this react or is this just the way import works? Are imports global for multiple instances of the same component? Or are imports of a node module the same for the whole application?

Upvotes: 0

Views: 1932

Answers (2)

kingdaro
kingdaro

Reputation: 12028

What causes this behavior? Is this react or is this just the way import works? Are imports global for multiple instances of the same component? Or are imports of a node module the same for the whole application?

This is the way imports work. When you import something for the first time, the file is run and the exported values from it are returned back to the one importing it. When something is imported again, those same exports are reused and returned. Node JS modules work the same way.

Sometimes this behavior is helpful, firstly for performance to avoid unnecessarily re-running the same file over again, and also if the module wants to store some internal state. For example, counting the number of times a function is called from anywhere in the application.

In cases like this, where you need a single instance of something for each script, modules will usually give you a way to actually make an instance of that thing. For example, I might have a logging module, which exports a Logger class, then I can make new instances of that class for each component, and configure each logger separately.

For your case, look in the docs to see if there's a way to make per-component instances of Highcharts and extend that individual instance with the functionality you need.

Upvotes: 1

Michael Ploeckinger
Michael Ploeckinger

Reputation: 1634

When you extend <Chart /> with a prop extendFunc it will be extended in your Chart Component and not in your "new" Component.

That means, if you call the component, it will always have the props you gave it, but you will not have to use them (if there are not set as required).

Upvotes: 0

Related Questions