Destructured imports vs namespace in react libraries using typescript

Question

My question is : is there any consequences in performance if using for example:

import * as Reanimated from 'react-native-reanimated'

Instead of :

import { useSharedValue, useAnimatedStyle, withspring, interpolate, Extrapolate } from 'react-native-reanimated'

Will react load all the library when using namespace ? Is there any différence when testing in thé two approaches ?

Asif vora · Accepted Answer · 2022-09-28 09:29:34Z

1

Import on-demand individual components or utils:

Here is the example of antd

Example:

import Button from 'antd/es/button'; 
import { Button } from 'antd'; // Imports all library

Here is another example of lodash. Only load required utils.

Example:

import assignIn from 'lodash/assignin';
import isPlainObject from 'lodash/isplainobject';
import isFunction from 'lodash/isfunction';

answered Sep 28, 2022 at 9:24

Asif vora

3,2853 gold badges18 silver badges35 bronze badges

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

1 Answer 1