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 ?

Answer 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';