pushkar100

/* ./simple-arithmetic.js */
export const add = (a, b) => a + b
export const subtract = (a, b) => a - b


/* ./complex-arithmetic.js */
export const multiply = (a, b) => a * b
export const divide = (a, b) => a / b
const power = (a, b) => Math.pow(a, b)		 
export default power

pushkar100

import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  'module'
);

pushkar100

// (A) What happens when you try to load dynamic chunks:

/* ./utilities.js */
export const add = (a, b) => a + b
export const subtract = (a, b) => a - b
export const multiply = (a, b) => a * b
export const divide = (a, b) => a / b
const power = (a, b) => Math.pow(a, b)		 
export default power

pushkar100

// (B) What you need to manually do to import only A from the dynamic chunk:

/* ./utilities.js */
export const add = (a, b) => a + b
export const subtract = (a, b) => a - b
export const multiply = (a, b) => a * b
export const divide = (a, b) => a / b
const power = (a, b) => Math.pow(a, b)		 
export default power

pushkar100

// Use an array to fetch multiple names exports:
import(/* webpackExports: ["named1", "named2"] */ "module")

// Use the "default" keyword to fetch the default export as well:
import(/* webpackExports: ["named1", "named2", "default"] */ "module")

// Array is not necessary to fetch a single export:
import(/* webpackExports: "named1" */ "module")

pushkar100

/* ./utilities.js */
export const add = (a, b) => a + b
export const subtract = (a, b) => a - b
export const multiply = (a, b) => a * b
export const divide = (a, b) => a / b
const power = (a, b) => Math.pow(a, b)		 
export default power

pushkar100

// Side effect & live binding example:

/* ./file1.js */
console.log('Loaded module') // Illustates side effect
let i = 0 // Illustrates live binding
export const A = () => {
	console.log('A', i)
	i += 5
}
export const B = () => {

pushkar100

/* What will happen if state is duplicated (i.e maintains two states which is wrong!) */
// Console output:

Loaded module
A 0
Loaded module
B 0

pushkar100

const getLogMetaData = () => ({
  source: 'www'
})

class Greetings extends React.Component {
  state = {};

  componentDidMount() {
    this.setState({
      meta: getLogMetaData()

pushkar100

const getLogMetaData = () => ({
  source: 'www'
})

const useLogger = () => {
  const [meta, setMeta] = useState({});
  const logger = (id, event) => {
    console.log(`id: ${id} | event: ${event}`);
    console.log(`source: ${meta.source}`);
  };