DEV Community: Keertivaas S

python revision

Keertivaas S — Fri, 07 Mar 2025 15:57:59 +0000

React Day Berlin 2024: Remote Reflections

Keertivaas S — Sat, 11 Jan 2025 13:39:50 +0000

I had the opportunity to attend React Day Berlin 2024 as a remote participant. It was indeed a fantastic virtual experience, packed with insightful talks that challenged my preconceived notions and provided valuable takeaways. Key topics discussed include React 19 features, React Compiler, AI Integration for React components and React Server Components.

Here are some of the key takeaways from the talks I attended:

React Server Components and AI: Tejas's talk on "React Server Components in AI Applications" was a standout. He convincingly demonstrated how leveraging Server Components to handle AI tasks server-side can significantly boost performance and enhance user experience. Importantly, his presentation dispelled the fear of AI replacing frontend developers, instead highlighting how AI can be used as a powerful tool to enhance our work.
The State Management Odyssey: "From Redux to Zustand to Jotai to Zustand to Custom: Our State Management Horror Story" provided valuable lessons about the trade-offs associated with different state management libraries. It emphasized that popularity doesn't necessarily equate to the best fit for every project. The talk even suggested that sometimes the best approach might be minimal state management, relying on useState or useContext where appropriate.
React Query: A Balanced Perspective: "React Query - The Bad Parts" offered a much-needed dose of realism, debunking some of the common myths surrounding React Query/Tanstack Query. The speaker clearly outlined the situations where React Query is truly beneficial and where alternative approaches might be more suitable.
Fine-Grained Reactivity: "Fine-Grained Reactivity Without Any Compiler" extended beyond the basic usage of useMemo, useCallback, and useEffect, providing valuable insights into optimizing component updates for improved performance.
The Promise of a React Compiler: "React Compiler - The Missing Piece for Optimizing React Applications" was a truly thought-provoking discussion. The potential performance gains and developer experience enhancements that a dedicated React compiler could unlock are truly exciting.
RUM: A Crucial Tool for Performance Monitoring: "Evaluating React Application Performance with a Sip of RUM" highlighted the critical importance of Real User Monitoring (RUM) in understanding real-world application performance. Analyzing RUM data provides invaluable insights for identifying and addressing performance bottlenecks.
StyleX: Atomic CSS with a Focus on Performance: "Atomic Power: the Story of StyleX" introduced StyleX, an atomic CSS-in-JS library prioritizing performance and maintainability. While similar to Tailwind, StyleX offers some notable improvements.
Building for the Present: A Pragmatic Approach: "Build Things That Don’t Scale at All" challenged the conventional wisdom of always building for extreme scalability. This talk emphasized the importance of focusing on solving the current problem effectively and avoiding over-engineering.
Iterative Component Design: A Key to Success: "Little Bits of Iterative Component Design" stressed the importance of breaking down complex components into smaller, more manageable pieces and iteratively refining them. This iterative design process should be a core part of our development workflow.
Universal React: Weighing the Trade-offs: "Age of Universal React - whats the catch" provided a balanced perspective on the challenges and limitations of adopting a Universal React approach, where React is used across various devices (web, mobile, etc.). The talk also briefly touched upon React Strict Mode, a recent addition from Facebook.
Enhancing Forms with Server Components: "Enhancing forms with React Server Components" demonstrated the significant advantages of handling form logic on the server-side. This approach has the potential to significantly improve performance, enhance security, and create a more seamless user experience.
Vector Search and Embeddings: A Glimpse into the Future: "Decoding Vector Search and Embeddings for React Developers" provided a fascinating introduction to these emerging technologies. The potential of vector search and embeddings to revolutionize search and recommendation systems is truly immense.

Overall, React Day Berlin 2024 was an incredibly enriching experience and I am eager to experiment with these concepts and see how they can be applied at work..

Sending Functions as Props in React

Keertivaas S — Sun, 28 Jul 2024 15:08:12 +0000

I am sure this concept would be a little too basic for some of you but just wanted to write about it as I faced a real world scenario for this usecase.

At work, I was presented with a challenge. There were 2 screens in the UI (Lets assume mobile UI - The screens were quite small). I was supposed to upload data (assuming images) in both the screens and the submit button in the second screen would submit the entire data (both the images).

Solution :

So, the state for the files would be in a common component. The state and the setter function would be passed as a prop to the respective components.

Since the state is maintained in the common component, there is no loss of data.

Simple code example (just a basic skeleton) :

const UploadComponent = (props) => {
  const { files, setFiles } = props;
  const onFileUploadA = (file) => {
    setFiles([...files, file]); // Appending file
  };
  return (
    <Upload onSubmit={(file) => onFileUploadA(file)} />
  );
};

const CommonComponent = (props) => {
  const [files, setFiles] = useState([]);
  return (
    <>
      <UploadComponent {...props} files={files} setFiles={setFiles} back={false} /> {/* Front page */}
      <UploadComponent {...props} files={files} setFiles={setFiles} back={true} /> {/* Back page */}
    </>
  );
};

The second upload just appends the new upload to the list of uploads, thus preventing loss of data.

The simplest explanation I have seen for Closures in JS (Credits : roadmap.sh)

Keertivaas S — Sun, 28 Jul 2024 13:58:38 +0000

Wanted to share here, the simplest explanation that I have ever seen on the web, for the famous Closures topic. (Credits : roadmap.sh)

A closure is a function that has access to its outer function scope even after the outer function has returned. This means a closure can remember and access variables and arguments of its outer function even after the function has finished.

function outer() {
  const name = 'Roadmap';

  function inner() {
    console.log(name);
  }

  return inner;
}

const closure = outer();
closure(); // Roadmap

In the above example, the inner function has access to the name variable of the outer function even after the outer function has returned. Therefore, the inner function forms a closure.

Lazy Loading :)

Keertivaas S — Sat, 06 Jul 2024 13:36:54 +0000

Sometimes a user might not click and view a part of the code. In that case, it doesn't make sense to load the component before we render the main screen. This is where Lazy Loading comes in.

Code example :

import React, { lazy, Suspense, useState } from 'react';

// Import component A directly (eager loading)
import A from './A';

// Lazy load component B
const B = React.lazy(() => import('./B'));

const App = () => {
  const [showComponentB, setShowComponentB] = useState(false);

  const handleClick = () => {
    setShowComponentB(true);
  };

  return (
    <div>
      <A />
      <button onClick={handleClick}>Click to view Component B</button>
      {showComponentB && (
        <Suspense fallback={<div>Loading...</div>}>
          <B />
        </Suspense>
      )}
    </div>
  );
};

export default App;

Explanation:

Here, the code imports A directly, assuming it's needed on the landing page (eager loading). B is lazy loaded using React.lazy and Suspense.

The render doesn't have to wait for B, before rendering A :)

?? (Nullish coalescing) vs || (Logical OR) in Javascript

Keertivaas S — Sun, 16 Jun 2024 11:29:30 +0000

Both Nullish Coalescing Operator (??) and Logical OR (||) operator are often used in JavaScript to provide a default value to variables. These help us prevent any unexpected behavior in our code.

Nullish Coalescing Operator (??): This is specifically designed to handle situations where the left operand might be unintentionally left unassigned (null) or missing a a value (undefined). It only considers null and undefined as nullish values.

Logical OR (||): This is useful when you want a default value if the left operand is any falsy value. This includes null, undefined, 0, empty string (""), false, and NaN.

Lets take these examples :

If you want to check and avoid printing empty values, use the Logical OR Operator (||).

console.log("" || "Hello") // "Hello"
console.log("" ?? "Hello") // ""

If 0 or Boolean false is a valid return value in your use-case, use ?? (Nullish coalescing).

console.log(0 || "Hello") // "Hello"
console.log(0 ?? "Hello") // 0

console.log(false || "Hello") // "Hello"
console.log(false ?? "Hello") // false

console.log(0 || "Hello") // "Hello"
console.log(0 ?? "Hello") // 0

If you are only checking for undefined or null, you can go for either one of them :

console.log(undefined ?? "Hello") // "Hello"
console.log(undefined || "Hello") // "Hello"

console.log(null ?? "Hello") // "Hello"
console.log(null || "Hello") // "Hello"

React useRef is easy!

Keertivaas S — Sat, 15 Jun 2024 13:06:09 +0000

We can use useRef instead of the usual way (event.target.value) to fetch an input value, in a much easier hassle free way. This example below can make you familiar with useRef, enabling you to sue it for more difficult scenarios:

const unameRef = React.useRef(); //declaration

const [userName, setUserName] = React.useState(''); // I have a sample variable to set username to

// Usage - React element

// A simple usage with useEffect to set focus to a form field

useEffect(() => {
unameRef.current.focus();
}, []);

// handleChange function

function handleChange(event){
setUserName(unameRef.current.value);
}

Creating a deep copy of a JS Object

Keertivaas S — Sat, 01 Jun 2024 10:35:57 +0000

Using Lodash :

const _ = require('lodash');

const originalObject = {
prop1: "value1",
prop2: {
nestedProp: "value2"
}
};

const deepCopy = _.cloneDeep(originalObject);

Using Underscore js :

const _ = require('underscore');
const deepclone = require('underscore.deepclone');

_.mixin(deepclone); // Add deepClone function to Underscore

const originalObject = {
prop1: "value1",
prop2: {
nestedProp: "value2"
}
};

However, using packages like lodash and underscore can be heavy as

const deepCopy = _.deepClone(originalObject);

A combination of JSON.parse and JSON.stringify :

const originalObject = {
prop1: "value1",
prop2: {
nestedProp: "value2"
}
};

const deepCopy = JSON.parse(JSON.stringify(originalObject));

When to use JSON.parse(JSON.stringify(obj)) :

Simple Data Transfer: If you're dealing with basic objects containing only primitive values (strings, numbers, booleans) and need to transfer them between environments that understand JSON, this method can be a quick and straightforward solution.
Shallow Copy with Specific Data Loss: If you intentionally want to remove functions, Dates, or other complex data types during the copy process, this method can achieve that. However, be aware of the potential data loss.

Issues with JSON.parse(JSON.stringify(obj)) :

Data Loss: This method can lose data during the conversion process. Functions, Dates, and other complex data types might not be accurately represented in JSON format and could be lost during parsing back to an object.
Circular References: It can't handle circular references (objects referencing themselves) in the data. This can lead to infinite loops during parsing.
Performance: While seemingly simple, stringifying and parsing a large object can be less performant compared to dedicated deep copy functions.

Advantages of using lodash clonedeep or underscore package based solution :

Preserves Data: These methods are designed to handle various data types and maintain their integrity during the copy process.
Handles Circular References: They can effectively deal with circular references in the object structure, preventing infinite loops.
Optimized for Deep Copying: Deep copy libraries like Lodash are often optimized for performance when creating deep copies of complex objects.

Conclusion :

In most cases, for reliable deep copying of objects in JavaScript applications, Lodash's _.cloneDeep or similar methods from other libraries like Underscore (with extensions) are preferred choices. They offer better performance, handle complex data types and circular references, and provide a more robust solution for deep copying objects.

Edit :

Adding another method of cloning - structuredClone, which is a built in function in Javascript : Credits : @jonrandy

const originalObject = {
prop1: "value1",
prop2: {
nestedProp: "value2"
}
};

originalObject.itself = originalObject;

const deepCopy = structuredClone(originalObject);

The above way preserves circular references as well as does not require external packages to download!

Containment and Specialization

Keertivaas S — Sun, 28 Apr 2024 09:43:35 +0000

In ReactJS, Containment and Specialization are techniques for building reusable and maintainable components. Here's a breakdown of each concept:

Containment:

Concept: Containment focuses on creating generic components that can hold any content passed to them as children.
Implementation: This is achieved using the special children prop in React. The component renders the content of the children prop within its own JSX structure.
Benefits:
- Promotes reusability: Generic components can be used in various contexts with different content.
- Improves code maintainability: You don't need to duplicate the same layout code for different components.

Specialization:

Concept: Specialization builds upon Containment. It involves creating a more specific component by inheriting functionality and structure from a generic container component.
Implementation: You create a new component that takes the generic container component as a prop and renders its own specific content within the container's layout.
Benefits:
- Leverages existing code: You reuse the layout and styles from the generic component.
- Improves code organization: Groups related functionalities into separate components.

Key Points:

Containment and Specialization promote the DRY (Don't Repeat Yourself) principle, reducing code duplication.
They encourage component composition, which is a core concept in React for building complex UIs from smaller, reusable pieces.
While React discourages traditional inheritance for components, containment provides a more flexible and composable approach.

useState and useReducer

Keertivaas S — Sat, 27 Apr 2024 09:17:35 +0000

Similarities between useState and useReducer:

Both useState and useReducer are React hooks used for managing state in functional components. They share these key points:

State Management: They both allow you to store and update data within a component that can trigger re-renders when the state changes.
Functional Components: They are exclusive to functional components in React, providing an alternative to the setState method in class components.
Return Value: Both hooks return an array containing:
- The current state value.
- A function to update the state (setter function for useState and dispatch function for useReducer).

When to use useState:

Simple State: It's ideal for managing a single piece of state, especially primitive values (strings, numbers, booleans) or single objects/arrays.
Straightforward Updates: The state updates are easy to understand and don't require complex logic or dependencies on previous state values.
Readability: You prioritize keeping your component code concise and easy to reason about.

When to use useReducer:

Complex State Management: You're dealing with multiple state values that are updated interdependently or require handling previous state values.
Centralized Logic: You want to centralize state update logic in a separate reducer function to improve code maintainability and reusability.
Advanced Patterns: You need to implement advanced state management patterns like state history or optimistic updates.
Performance Optimization (Deep Updates): You're working with deep updates in the component tree, where useReducer can offer slight performance improvements because dispatch functions can be passed down without recreating functions on every render.

Reducing Bundle size of a Frontend application by optimizing Lodash imports

Keertivaas S — Wed, 20 Mar 2024 14:26:49 +0000

We recently analyzed the bundle size of our frontend application and noticed the Lodash package was taking up a significant amount of space. Lodash offers many useful utilities for common tasks like filtering, sorting, mapping and manipulating data. However, importing the entire library increases bundle size considerably.

We decided to optimize our usage of Lodash to reduce this bundle size. Upon inspection, we found we were importing the whole library using imports like

const lodash = require('lodash');
and
const _ = require('lodash');

While convenient, this brings in all of Lodash's functions regardless of what we actually use.

A better approach is to import only the specific functions needed. For example, using

const merge = require('lodash/merge');
and
const cloneDeep = require('lodash/cloneDeep');

We import just those individual methods rather than the entire library. This avoids unnecessary code and reduces bundle size.

We also noticed imports like

const { get } = require('lodash');

that destructure the
get function. However, this still imports the whole Lodash library first before extracting the function. For even better optimization, we can import directly from the sub-module like

const get = require('lodash/get');

This imports only the needed
get
code without the full library.

By analyzing usage and optimizing imports in this way, we were able to significantly reduce the size of lodash in our bundle. What seemed like minor changes made a meaningful impact on bundle size. With some inspection of imports, libraries like Lodash can be used efficiently without the overhead of unused code. This optimization is especially important as bundle size directly impacts performance and user experience.

Reference :

https://lodash.com/per-method-packages