DEV Community: Ola Abaza

1 RN Thing a Day – Day 11: When Is await Unnecessary?

Ola Abaza — Tue, 10 Feb 2026 14:57:54 +0000

The Basic Rule
Inside an async function:

👉 If you are just returning a Promise, you do NOT need await.

Simple Example
Look at these two functions:

Version 1

async function getData() {
  return await fetchData()
}

Version 2

async function getData() {
  return fetchData()
}

Both functions do exactly the same thing.

They return a Promise
They resolve to the same value
No behavior difference

So in Version 1, the await is unnecessary.

Why This Works
An async function automatically wraps its return value in a Promise.

So when you write:

return fetchData()

JavaScript already knows it’s a Promise and returns it correctly.

Adding await just waits for the Promise and then returns the same result—without any benefit.

When await IS Needed
You need await only when you actually want to use the result.

async function getUserName() {
  const user = await fetchUser()
  return user.name
}

Here await is required because you need to access user.name.

Easy Rule to Remember

Use await when:

You need the resolved value
You want to do logic with the result
You have multiple async steps

Skip await when:

You are only returning a Promise
No extra logic is needed

TL;DR
Inside an async function:
👉 If you are only returning a Promise, don’t use await.

1 RN Thing a Day – Day 10: Memoization in React Native

Ola Abaza — Sat, 30 Aug 2025 13:03:13 +0000

It is an optimization technique used to improve performance by caching the results of expensive function calls or avoiding unnecessary re-renders of components.

How to use memoization effectively in React Native:

Memoizing Components with React.memo React.memo is used to prevent unnecessary re-renders of functional components when their props do not change.

import React from 'react';

const ExpensiveComponent = React.memo(({ data }) => {
  console.log('Rendering ExpensiveComponent');
  return <Text>{data}</Text>;
});

// Parent component
const App = () => {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ExpensiveComponent data="This won't re-render" />
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </>
  );
};

In this example, ExpensiveComponent only re-renders if its data prop changes.

2.Memoizing Values with useMemo
useMemo caches the result of an expensive computation so that it does not need to be recalculated unless its dependencies change.

import React, { useMemo } from 'react';

const App = () => {
  const [count, setCount] = React.useState(0);

  const expensiveCalculation = useMemo(() => {
    console.log('Performing expensive calculation');
    return count * 2;
  }, [count]);

  return (
    <>
      <Text>Result: {expensiveCalculation}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </>
  );
};

3.Memoizing Functions with useCallback
useCallback memoizes a function to avoid re-creating it on every render, especially when passing it as a prop to child components.

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ onPress }) => {
  console.log('Rendering Button');
  return <TouchableOpacity onPress={onPress}><Text>Press Me</Text></TouchableOpacity>;
});

const App = () => {
  const [count, setCount] = useState(0);

 // without useCallback the onPress prop changed (new function reference), so I need to re-render <Button />

  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <>
      <Text>Count: {count}</Text>
      <Button onPress={increment} />
    </>
  );
};

Without useCallback, the increment function would be re-created on every render, causing the Button component to re-render unnecessarily.

The problem without useCallback

In React, functions are objects.
Every time your component re-renders, any inline function you create gets a new reference in memory even if the logic is identical.

Avoid Overusing Memoization

Avoid memoizing components or values that are inexpensive to compute.
Use profiling tools (e.g., React DevTools Profiler) to identify performance bottlenecks before applying memoization.

Memoization Libraries

In some cases, you might want to use libraries like memoize-one or lodash.memoize for custom memoization needs:

import memoize from 'lodash.memoize';

const memoizedFunction = memoize(expensiveFunction);

function expensiveFunction(arg) {
  console.log('Calculating...');
  return arg * 2;
}

console.log(memoizedFunction(2)); // "Calculating..." -> 4
console.log(memoizedFunction(2)); // Cached result -> 4

lodash.memoize keeps a cache of results for each unique input key you pass in.

useMemo (React) doesn’t store results for every input ever passed.
It only remembers the last computation tied to its dependency array.

What memoization does under the hood

When you use React.memo, useMemo, or useCallback, React has to:
Store the previous value (or component render).
Compare the current props/values with the previous ones (a shallow comparison).
Decide whether to re-render or return the cached result.

This bookkeeping work itself takes CPU time and memory.

If the component or calculation is very cheap (e.g., rendering a single or calculating a + b), then:
Re-rendering or recalculating is often faster than doing all the memoization checks.
Adding memoization in such cases can slow things down instead of speeding them up

Always measure (with React DevTools Profiler) before and after, to confirm the performance gain.

1 RN Thing a Day – Day 9: Animated API

Ola Abaza — Mon, 18 Aug 2025 20:09:55 +0000

In React Native, the Animated API is used because it gives you a performant and flexible way to create animations in your app.

🔑 Reasons to Use the Animated API

Performance
If you animate with setState, every frame causes a full React render, which is slow.The Animated API runs animations on the native UI thread (especially with useNativeDriver: true), so animations stay smooth (60fps)(frames per second) even if JavaScript is busy.
Declarative Animations
You describe what should happen (e.g., "move this box from X=0 to X=200 over 500ms"), and React Native handles the how. Makes animations easier to reason about.
Reusability
The same Animated.Value can drive multiple properties (opacity, scale, rotation, etc.). Easier than manually tracking multiple states.
Gestures + Physics
Supports spring animations, decay (momentum), and interactions with touch gestures. Perfect for natural-feeling UI like swipes, drags, and bounces.
Cross-Platform Consistency
Works on both iOS and Android with the same API, without you needing to use native code for animations.
Interpolation
You can map one animated value into different ranges. Example:

const progress = useRef(new Animated.Value(0)).current;

// Slide horizontally
const translateX = progress.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 200],
});

// Fade out
const opacity = progress.interpolate({
  inputRange: [0, 0.5, 1],
  outputRange: [1, 0.5, 0],  // custom curve
});

// Rotate
const rotate = progress.interpolate({
  inputRange: [0, 1],
  outputRange: ["0deg", "360deg"],
});

All are derived from the same progress value.
→ This allows chaining multiple visual effects from one value.

🔹 Step by step (useRef(new Animated.Value(0)).current;)
1- new Animated.Value(0)
Creates an Animated.Value object starting at 0.
This is the special type React Native uses to drive animations (instead of a normal number).

2- useRef(...)
Ensures the value is persistent across re-renders.
Without useRef, every re-render would create a new Animated.Value, resetting the animation back to 0.
With useRef, React will keep the same object during the component’s lifecycle.

3- .current
useRef returns an object like { current: }.
.current gives you the actual Animated.Value stored inside.

Example

import React, { useRef, useEffect } from "react";
import { Animated, View } from "react-native";

export default function Box() {
  const fadeAnim = useRef(new Animated.Value(0)).current; // start opacity at 0

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: true, // run on UI thread
    }).start();
  }, []);

  return (
    <Animated.View
      style={{
        opacity: fadeAnim,
        width: 100,
        height: 100,
        backgroundColor: "blue",
      }}
    />
  );
}

👉 Without Animated, you'd have to manually update opacity on every frame — very inefficient.

✅ In short:
We need the Animated API in React Native because it makes animations smooth, efficient, declarative, and easy to combine with gestures and physics.

🔹 What happens with setState?

When you call setState, React re-renders in the JS thread.
That means every frame of the animation depends on the JS thread being free and fast.
If the JS thread is busy (fetching API, parsing JSON, rendering a heavy component), the animation drops frames → stutters.
That’s why animations with setState often run at 30fps or less, instead of smooth 60fps.

⚖️ Quick Comparison between Animated(built-in) and react-native-reanimated

Performance --> Good, but JS can block --> Excellent (runs on UI thread)
Complexity handling --> Basic animations only --> Handles very complex flows
Gesture support --> Limited --> designed to work seamlessly with react-native-gesture-handler.
Ease of use --> Simple API --> Steeper learning curve
Dependencies --> Built-in (no install) --> Requires installation & setup
Recommended for production --> Small/simple apps --> Medium/large apps with rich UI

1 RN Thing a Day – Day 8: Trivyignore

Ola Abaza — Sun, 17 Aug 2025 22:58:44 +0000

.trivyignore is a configuration file used by Trivy, an open-source vulnerability scanner for containers, Kubernetes, and other dependencies.

🔹 Containers
A container is a lightweight, standalone package that includes:
The application code (e.g., your React Native backend service, or a Node.js API)

Its dependencies (libraries, runtimes like Node.js, Python, Java, etc.)
The OS-level binaries needed to run

👉 Think of it like a zip file that has everything your app needs so it runs the same way on any machine.

🔹 Kubernetes (K8s)3
Kubernetes is a system that helps you run and manage containers across multiple machines.

With Kubernetes:

You describe what you want (e.g., "I need 5 containers of my RN backend always running").
Kubernetes automatically deploys, scales, heals, and load-balances containers.

👉 Think of it like a container orchestrator or a "manager for containers."

📌 Example:

You write a YAML file (deployment.yaml) that says:
Run 5 replicas of my RN backend container.
Expose them via a service on port 3000.
Kubernetes ensures those 5 are always running. If one dies → it restarts it.

Container = a package of your app + everything it needs to run.
Kubernetes = a system that runs and manages lots of containers reliably.

What is Trivy?
Trivy is a security scanning tool developed by Aqua Security that detects:

OS package vulnerabilities (e.g., in Alpine, Debian, Ubuntu)
Application dependencies vulnerabilities (e.g., npm, pip, Maven)
Container image vulnerabilities
Infrastructure as Code (IaC) misconfigurations

What is .trivyignore?
.trivyignore is a file that allows you to ignore specific vulnerabilities found by Trivy. This is useful when you:

Acknowledge a vulnerability but determine it doesn’t affect your project.
Are waiting for an upstream fix and want to suppress noise.
Need to whitelist known issues for compliance reasons.

How to use .trivyignore?

Create a .trivyignore file in your project root.
Add the vulnerability IDs you want to ignore.

CVE-2022-1234
CVE-2021-5678

Trivy will skip reporting these vulnerabilities in scans.

1 RN Thing a Day – Day 7: KeyboardAwareScrollView

Ola Abaza — Mon, 11 Aug 2025 21:58:09 +0000

KeyboardAwareScrollView is a component from the react-native-keyboard-aware-scroll-view library that helps handle keyboard interactions in React Native. It ensures that input fields remain visible when the keyboard appears, preventing them from being covered.

Usage:
Here's a simple example of how to use KeyboardAwareScrollView:

import React from 'react';
import { TextInput, View, Text } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const MyScreen = () => {
  return (
    <KeyboardAwareScrollView
      style={{ flex: 1, padding: 16 }}
      contentContainerStyle={{ flexGrow: 1 }}
      enableOnAndroid={false} //  true by default
      extraScrollHeight={0} // Adjusts scrolling space when the keyboard  is open , 75 by default
      keyboardShouldPersistTaps="handled" //"never" by default
      showsVerticalScrollIndicator: false
      bounces: false
    >
      <View>
        <Text>Enter your details:</Text>
        <TextInput
          placeholder="Type here..."
          style={{
            height: 50,
            borderWidth: 1,
            borderColor: '#ccc',
            marginVertical: 10,
            paddingHorizontal: 10,
          }}
        />
      </View>
    </KeyboardAwareScrollView>
  );
};

export default MyScreen;

Key Props:

enableOnAndroid={false}: Disables keyboard awareness on Android. If you need input fields to move up when the keyboard appears, you might want this set to true.
extraScrollHeight={0}: No additional space is added when the keyboard appears. If inputs get covered, consider increasing this value (e.g., extraScrollHeight: 20).
keyboardShouldPersistTaps=" handled": Allows taps on the screen to dismiss the keyboard.
showsVerticalScrollIndicator: "false": Hides the vertical scrollbar, which might be good for a cleaner
contentContainerStyle={{ flexGrow: 1 }}: Ensures content is scrollable when necessary.
bounces: "false": Prevents the slight bounce effect when reaching the top or bottom of the scrollable content.

List of other common KeyboardAwareScrollView props:

enableAutomaticScroll – true (will scroll automatically to focused input).
extraHeight – 0 (no extra height unless set).
keyboardOpeningTime – 250 (ms delay before scrolling).
viewIsInsideTabBar – false (no adjustment unless inside tab bar).
enableResetScrollToCoords – true (scroll resets when keyboard hides).
contentContainerStyle – undefined (no default styles).
showsVerticalScrollIndicator – true (scroll bar visible).
bounces – true (scroll view bounces at edges).
horizontal – false (scrolls vertically by default).
onScroll – undefined (no default scroll handler).
pagingEnabled – false (no page snapping).
onKeyboardWillShow – undefined (no default event handler).
onKeyboardDidShow – undefined (no default event handler).
onKeyboardWillHide – undefined (no default event handler).

If you don’t use KeyboardAwareScrollView:

Input fields near the bottom may get covered by the keyboard.
You’ll need to manually handle keyboard show/hide events.
Scrolling to bring inputs into view won’t happen automatically.
Different behavior on iOS vs Android may cause inconsistent UX.
User may need to manually scroll to see what they’re typing.
Small-screen devices will have worse usability.

1 RN Thing a Day – Day 6: Shallow Copy vs. Deep Copy

Ola Abaza — Sat, 09 Aug 2025 18:27:36 +0000

Example: Shallow Copy vs. Deep Copy

import cloneDeep from 'lodash/cloneDeep';

const original = [
  { id: 1, info: { status: "active" } },
  { id: 2, info: { status: "inactive" } }
];

// Shallow copy
const shallowCopy = original.slice();
shallowCopy[0].info.status = "changed";
console.log(original[0].info.status); // "changed" (still linked)

// Deep copy
const deepCopy = cloneDeep(original);
deepCopy[0].info.status = "changed again";
console.log(original[0].info.status); // "changed" (original unaffected)
console.log(deepCopy[0].info.status); // "changed again"

cloneDeep from Lodash recursively walks through the structure of your object or array and:

Creates new objects/arrays instead of reusing existing ones.
Copies primitive values (string, number, boolean) directly.
Handles special types (Date, Map, Set, RegExp, Buffer, TypedArrays).
Supports circular references (won’t get stuck in infinite recursion).
Preserves property descriptors, prototype chains, and symbols.

The Core Problem It Solves
In JavaScript, objects and arrays are reference types.

const a = { name: "Ola" };
const b = a; // just a reference, not a copy

b.name = "Changed";

console.log(a.name); // Changed 😱

Here, a and b are pointing to the same object in memory.

If you try to "copy" an array of objects using things like .slice() or .filter(), you only copy the outer array, not the inner objects.
So you still have shared references to the nested objects.

When You Should Use cloneDeep:

Transformations: You’re modifying data but want the original untouched.
Redux state: Avoid accidental mutation of state objects.
Test data: Copy fixtures so each test gets a fresh, isolated version.
Breaking shared references: When two lists should contain separate but identical-looking objects.

When You Should Use a Shallow Copy:

The data does not contain nested objects/arrays that we care about mutating independently.
Or when we only need to change the outer layer of the structure.
Arrays of primitives

const nums = [1, 2, 3];
const copy = nums.slice(); // shallow copy

copy[0] = 99;

console.log(nums); // [1, 2, 3] ✅ unaffected

Primitives (numbers, strings, booleans) are copied by value,
so shared references aren’t a problem.

_"Copied by value" means_When you assign or copy a primitive, JavaScript copies the actual value, not a reference to it.
So changes to one variable do not affect the other.

Short-lived transformations If you just need a quick copy to sort, filter, or reverse the outer array but don’t care about mutating the nested items later:


const people = [{ name: "Ola" }, { name: "Ali" }];

// Just sorting names
const sorted = [...people].sort((a, b) => a.name.localeCompare(b.name));

console.log(sorted[0] === people[0]); // true (same reference inside)

Sorting changes only the array order, not the inner objects.

Replacing the top-level object

const state = { count: 0, user: { name: "Ola" } };

// Only replacing user object
const newState = { ...state, user: { name: "John" } };

console.log(state.user.name); // Ola ✅ unchanged
console.log(newState.user.name); // John

Here, we create a new outer object but explicitly replace the nested one.
No need to deep clone the whole thing.

💡Rule of Thumb:

If the structure has no nested objects/arrays that will be mutated independently,
or if you will replace nested data entirely instead of mutating it,
then a shallow copy is fine.

1 RN Thing a Day – Day 5: Usage of _partition

Ola Abaza — Fri, 08 Aug 2025 15:28:48 +0000

— partition is a function from the Lodash library.

What _.partition does
.partition(collection, predicate)

Takes an array (collection) and a predicate function (a condition).
Splits the array into two sub-arrays:
- First array → all elements where the predicate returns true
- Second array → all elements where the predicate returns false
Returns them as a 2-element array: [matches, nonMatches].

Example

const assets = [
  { name: 'iPhone', assetType: 'Device' },
  { name: 'Netflix', assetType: 'Subscription' },
  { name: 'iPad', assetType: 'Device' }
];

const [devices, subs] = _.partition(
  assets,
  asset => asset.assetType === 'Device'
);

console.log(devices);
// [{ name: 'iPhone', assetType: 'Device' }, { name: 'iPad', assetType: 'Device' }]

console.log(subs);
// [{ name: 'Netflix', assetType: 'Subscription' }]

Why it’s different from .filter()
If you used .filter() twice like this:

const truthy = arr.filter(x => condition(x));
const falsy = arr.filter(x => !condition(x));

You’d loop through the array two times.
_.partition does it in one loop more efficient.

1 RN Thing a Day – Day 4: Usage of omitBy

Ola Abaza — Fri, 08 Aug 2025 15:15:53 +0000

In Lodash, _.omitBy creates a new object by removing properties where the predicate function returns true.

_.omitBy is only for objects (key–value pairs), not for arrays of values.
If you have an object → use omitBy (removes properties based on a condition) or pickBy (Keeps properties based on a condition).
If you have an array → use filter (removes items based on a condition) or map (transforms each item).

What omitBy Does
_.omitBy(object, predicate)

Loops over each property of the given object.
Runs your predicate function for every (value, key).
If predicate returns true, that property is removed from the new object.
Returns a new object (does not modify the original).

Think of it as the opposite of _.pickBy — instead of keeping matching properties, you remove them.

Basic Example

import omitBy from 'lodash/omitBy';

const obj = {
  name: 'Ola',
  age: 0,
  active: false,
  city: null
};

const result = omitBy(obj, (value) => value == null);
// removes `null` and `undefined`

console.log(result);
// { name: 'Ola', age: 0, active: false }

How the Predicate Works
The predicate gets two arguments:

(value, key) => {
  // value → the property value
  // key   → the property key as a string
}

Example:

omitBy(obj, (value, key) => key === 'age');
// removes any property where the key is "age"

Common Uses

Remove null or undefined fields

omitBy(obj, value => value == null);

Remove all falsy values (false, 0, '', null, undefined, NaN)

omitBy(obj, value => !value);

Remove keys by name pattern

omitBy(obj, (value, key) => key.startsWith('_'));
// removes any key starting with underscore

Difference from omit

omit → remove by key names you already know:

**_.omit(obj, ['age', 'city']);*

omitBy → remove by a condition (calculated dynamically for each key).

1 RN Thing a Day – Day 3: What Is Babel

Ola Abaza — Thu, 07 Aug 2025 21:33:47 +0000

What Is Babel?
JavaScript compiler that lets you use modern JavaScript features (like optional chaining ?., nullish coalescing ??, arrow functions, etc.) and compiles them down to code that older browsers or environments can understand.

What Babel Does

let, const, arrow functions --> Older var and function syntax
JSX (Hello) --> React.createElement() calls
Optional chaining (a?.b) --> Compatible fallback code
Nullish coalescing (a ?? b) --> Equivalent old JS logic
TypeScript or Flow --> Stripped out, leaving only JS

Babel in React Native
React Native uses Babel under the hood to:

Compile JSX
Support modern JavaScript features
Work across Android/iOS JavaScript runtimes
Enable developer tools (like source maps, plugins)

What is babel.config.js?
babel.config.js is Babel’s configuration file. It tells Babel:

Which plugins to use (e.g. babel-plugin-lodash)
Which presets to use (e.g. @babel/preset-env, metro-react-native-babel-preset in React Native)

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['lodash'],
};

Babel Plugins:
Plugins extend Babel’s capabilities. For example:

@babel/plugin-proposal-optional-chaining → allows a?.b
babel-plugin-lodash → optimizes lodash imports
@babel/plugin-transform-runtime → reduces bundle size

Babel Presets:
Presets in Babel are collections of plugins bundled together for convenience.

Instead of manually listing all the Babel plugins needed to transform your code, you just use a preset.

Examples of Common Presets:

@babel/preset-env --> Transforms modern JavaScript (ES6+) into code that works in older browsers
@babel/preset-react --> Adds support for JSX and React features
@babel/preset-typescript --> Transforms TypeScript into JavaScript
module:metro-react-native-babel-preset --> Used in React Native projects; supports JSX, modern JS, etc.

When Does Babel Run?
In React Native, when you run npx react-native start (Metro bundler watches and transpiles files using Babel)

Example Flow (React Native)

You write modern JavaScript (optional chaining, ES6 imports, etc.)
Metro + Babel transforms it to compatible code (require(), if (a && a.b))
The transformed bundle is sent to the device or emulator
The JS runs in the JavaScript engine (Hermes or JSC)

Why It Matters

Babel is not included in the final app — it’s a dev/build tool.
Babel ensures cross-platform compatibility by converting newer JS to older syntax.
It enables advanced features like JSX, decorators, and custom plugins.

1 RN Thing a Day – Day 2: Throttling 🆚 Debouncing

Ola Abaza — Tue, 05 Aug 2025 19:27:10 +0000

Throttle
Limits a function to execute once every X ms.

Use Case: Limit frequency of rapievents.ts

Example Use: Scroll, resize, Location updates (e.g., GPS), button taps

Example: Scroll Event

import throttle from 'lodash/throttle';

const handleScroll = throttle((event) => {
  console.log('Scrolling...', event.nativeEvent.contentOffset.y);
}, 1000); // Only once every 1 second

<ScrollView onScroll={handleScroll} scrollEventThrottle={16} />

🔁 Even if the scroll event fires 60 times per second, your handler only fires once every 1000 ms.

Debounce
Waits until a function hasn't been called for X ms.

Use Case: React to the final event after user stops

Example Use: Text search, Form validation while typing, autocomplete, form

Example: Text Input

import debounce from 'lodash/debounce';

const handleChange = debounce((text) => {
  console.log('Searching for:', text);
}, 500); // Only runs 500ms after user stops typing

<TextInput onChangeText={handleChange} />

⏳ The user types "h-e-l-l-o," and the function fires once, after the user pauses for 500 ms.

What debounce() Does Internally:

When you call:

debounce((text) => { ... }, 500)

…it wraps your function in a way that:

Every time the function is called (e.g., from onChangeText while typing),
It resets a timer (using setTimeout)
The actual function only runs if the timer completes without interruption (i.e., you stop typing for ms).

Utility Code Without Lodash (Optional)
You can write your own too:

function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}


function throttle(fn, limit) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

1 RN Thing a Day – Day 1: Lodash in React Native (Do You Really Need It?)

Ola Abaza — Mon, 04 Aug 2025 20:55:24 +0000

lodash

It is a JavaScript utility library that is fully compatible with React Native. It provides a large number of helpful utility functions to make working with arrays, objects, numbers, strings, etc., easier and more consistent.

Do We Really Need Lodash?
Not always.
If you're only using one or two functions like isNumber, it's often better to write them yourself or use native JavaScript.

But for more complex operations like deep cloning, sorting, or throttling, Lodash saves time and reduces bugs.

Performance Tips

Lodash is huge if you import the full library. Always import specific methods like lodash/isNumber to avoid bloating your bundle.

because if you do this:

import _ from 'lodash';

✅ It works.

❌ But it includes the entire Lodash library, even if you only use isNumber(). That adds ~70 KB+ to your bundle.

Bloating your bundle” means adding unnecessary code that's never used but still included in your final app.

Tools like babel-plugin-lodash help optimize it automatically. babel-plugin-lodash

This Babel plugin automatically rewrites your imports like this:
From:
import { isNumber } from 'lodash';
To:
import isNumber from 'lodash/isNumber';

Final Thoughts
Lodash is still useful just use it wisely. Import only what you need and lean on native JavaScript when possible.