How to dynamically import react component inside file based on prop

Question

I have a file (in this case Test.js) that will have many small components in the future (at the moment just Test and SuperTest).

I don't want to import the whole file in order to optimize performance. I try to import just the component I need. Not the whole file.

In the example, prop can be either "Test" or "SuperTest". It throws an error Unexpected token (7:26) Is there any way to accomplish that? and then render that into App?

App.js

import { useState } from 'react';
// import Test from './Test';

function App({prop}) {
  const [Comp, setComp] = useState(null);

  import('./Test').then(({`${prop}`: newComp}) => { // This is an ERROR
    console.log(typeof newComp); // Object
    setIcon(() => newComp);
  });

  return (
    <div className="App">
      <Comp />
    </div>
  );
}

export default App;

Test.js

export const Test = () => {
  return (
    <div>
      Hello People
    </div>
  );
}

export const SuperTest = () => {
  return (
    <div>
      Hello People 2
    </div>
  );
}

[This post might be pertinent](https://stackoverflow.com/questions/36367532/how-can-i-conditionally-import-an-es6-module). — Alexander Nied, Sep 23 '21 at 05:26
Our of curiosity; why do you want to add many components to just one file? Wouldn't it be more conventional and convenient to split components to their own files? Either way, you are using `named imports` already when you import `useState` from `react`. Why don't you just import your components the same way - you already export them separately anyway! — faerin, Sep 23 '21 at 05:27
What's wrong with using `import { Test } from './Test';`? Imports don't generally effect performance (*unless you are referring to outputted bundle sizes, but there are other solutions for this*) since they are used when compiling the code, not running it. See [Code Splitting](https://reactjs.org/docs/code-splitting.html). — Drew Reese, Sep 23 '21 at 05:33
@DrewReese In the future, I will have many functions inside it, and don't want to have all of them in the webpack bundle everytime the user need just one of them. What is the other solution you are referencing? — JohnBonjon, Sep 23 '21 at 21:51
Since it wasn't clear what sort of performance you were concerned about optimizing I interpreted your question to be about running performance (speed, memory usage, etc...). The alternative I referenced is about bundle size optimizations, specifically tree shaking: https://webpack.js.org/guides/tree-shaking/ — Drew Reese, Sep 23 '21 at 22:02

score 0 · Answer 1 · answered Sep 23 '21 at 05:52

If you want to use many functions/components in single file and have to call the function dynamically then try below code.

Add getData() function to invoke the function in Test.js file.

Test.js

const Test = () => {
  return (
    <div>
      Hello People
    </div>
  );
}

const SuperTest = () => {
  return (
    <div>
      Hello People 2
    </div>
  );
}   

export function getData(fnName) {
  switch (fnName) {
  case "Test":
    return Test();
  default:
    return SuperTest();
  }
}

Call getData() function and pass your prop as parameter

App.js

import("./Test").then((fn) => {
  let newComp = fn.getData({prop}));
  // use above newComp value
});

that's a good idea. Unfortunately, it still includes both functions inside the webpack bundle. My whole purpose is to only include the function I will use (in the example Test or SuperTest) inside the bundle. So I can load on demand. In the future, I'll have many more more functions and can't load everything any time the user needs only one. — JohnBonjon, Sep 23 '21 at 21:48

score 0 · Answer 2 · answered Sep 23 '21 at 06:26

0

don't wrap props in this {props}. try this one:

function App(prop) {
  const [Comp, setComp] = useState(null);

answered Sep 23 '21 at 06:26

Dawood Ahmad

476
4
13

How to dynamically import react component inside file based on prop

2 Answers2