links: [[React MOC]]
---
# How to conditionally load components using Suspense
I had a problem where I would like to load storybook only in dev mode. I need a way to load these components lazily and conditionally.
Here's an example of loading StoryBook only in Dev mode
```tsx
import React, { useState, useCallback, Suspense, lazy } from 'react';
import { ActivityIndicator, AppRegistry, DevSettings } from 'react-native';
...
const RootComponent = () => {
const [storybookActive, setStorybookActive] = useState(false);
const toggleStorybook = useCallback(
() => setStorybookActive(active => !active),
[],
);
useMountEffect(() => {
if (__DEV__) {
DevSettings.addMenuItem('Toggle StoryBook', toggleStorybook);
}
});
if (storybookActive) {
const StorybookUIRoot = lazy(() => import('./storybook'));
return (
<Suspense fallback={<ActivityIndicator />}>
<StorybookUIRoot />
</Suspense>
);
}
return <App />;
};
```
---
tags: #react , #lazy , #suspense
sources:
- [import modules dynamically from 2ality](https://2ality.com/2017/01/import-operator.html)
- [How to use suspense from react docs](https://reactjs.org/docs/concurrent-mode-suspense.html)
- [named imports issue while using lazy](https://github.com/facebook/react/issues/14603)
- [Proxy solution to use named imports](https://github.com/JLarky/react-lazily)