DEV Community: Pratham Srivastava

🌟 Latest CSS Features in 2024-2025: What's New and Exciting?

Pratham Srivastava — Fri, 20 Jun 2025 09:08:13 +0000

CSS is evolving faster than ever, and browser vendors are catching up quickly. If you're a frontend developer, staying updated on the latest CSS features can dramatically improve your workflow, reduce JavaScript overhead, and enable cleaner, more maintainable code.

This post covers the most recent and upcoming CSS features supported by modern browsers in 2024 and beyond.

1. `:has()` - The Parent Selector ✅

Status: Supported in all major browsers (Chrome, Firefox, Safari, Edge)

article:has(h2) {
  border-left: 4px solid #3b82f6;
}

This long-awaited parent selector allows styling a parent based on its child. Think of it as bringing reactive logic directly into CSS!

Use cases:

Add styles to a card if it contains an image
Highlight forms that contain invalid fields
Conditionally show elements

2. `@scope` - Scoped Styling (Experimental) 🚀

Status: Supported in Chrome and Safari (behind flags in others)

@scope (.card) {
  h2 {
    color: teal;
  }
}

@scope allows you to scope a set of styles to a part of the DOM. Think of it like :is() + :where() but localized and smarter.

Use cases:

Write modular, reusable components without style leakage
Eliminate need for heavy BEM naming

3. CSS Nesting ✅

Status: Supported in Chrome, Safari, Firefox, and Edge

.card {
  color: black;

  &:hover {
    color: blue;
  }
}

Now you can write cleaner, more readable styles without using a preprocessor like Sass.

Benefits:

Cleaner scoping
Easier maintenance
Better structure for components

4. `color-mix()` and `relative-color()` 🚀

Status: Supported in Chrome and Safari (partial support in Firefox)

color: color-mix(in srgb, red 50%, white);

Mix colors directly in CSS!

--primary: #3b82f6;
--light: relative-color(--primary lightness + 30%);

Define derived colors based on another.

5. Container Queries ✅

Status: Supported in all major browsers

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
}

CSS can now respond to element size, not just the viewport. This is a game-changer for component-based design.

Use cases:

Adaptive cards
Responsive sidebars
Grid layouts that adapt inside other containers

6. View Transitions API (CSS + JS) 🚀

Status: Supported in Chromium browsers (Safari & Firefox partial)

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.4s;
}

Paired with JavaScript's startViewTransition(), you can now add seamless page transitions natively.

7. Anchor Positioning 🌌

Status: Partially supported (behind flags in some browsers)

.my-tooltip {
  position: anchor;
  anchor-name: --target;
  top: anchor(top);
  left: anchor(center);
}

CSS-based positioning that dynamically adapts to the layout and scroll state. Think tooltips, popovers, dropdowns — without JS hacks.

8. `accent-color` ✅

Status: Fully supported

input[type="checkbox"] {
  accent-color: #3b82f6;
}

Customize checkboxes, radio buttons, and range sliders without heavy styling or JavaScript.

9. `:nth-child(An+B of S)` Advanced Selectors ✅

Status: Supported in most modern browsers

li:nth-child(2n of .highlight) {
  background: yellow;
}

Filter based on subset of siblings — great for selective styling without adding classes manually.

10. Logical Properties ✅

padding-inline: 1rem;
padding-block: 2rem;

Instead of padding-left/padding-right, use logical properties for better support in right-to-left (RTL) layouts and accessibility.

Summary Table

Feature	Support Status	Description
`:has()`	✅ Full	Parent selector
`@scope`	🚧 Experimental	Scoped styles
Nesting	✅ Full	Sass-like nesting in native CSS
`color-mix()`	✅ Partial	Mix colors in CSS
Container Queries	✅ Full	Style based on container size
View Transitions API	✅ Chromium	Native page transition animations
Anchor Positioning	🚧 Partial	Position based on DOM anchors
`accent-color`	✅ Full	Custom form control colors
`nth-child of S`	✅ Most Browsers	More powerful structural pseudo-class
Logical Properties	✅ Full	Direction-aware spacing & layout

Final Thoughts

These CSS features are reducing our reliance on JavaScript and giving us new superpowers as frontend developers. If you haven’t yet experimented with container queries, view transitions, or :has(), now is the time to do it!

Stay modern, write less code, and build cleaner UI!

Data Fetching Patterns in React: A Comprehensive Guide

Pratham Srivastava — Sun, 13 Apr 2025 18:05:06 +0000

In modern React applications, efficient data fetching is crucial for performance and maintainability. This blog post explores an advanced pattern for data fetching that can significantly improve your application's architecture.

The Traditional Approach and Its Drawbacks

Most React developers are familiar with the standard way of fetching data inside components:

function PostComponent() {
  const { data: post, isPending, isError, error } = useQuery({
    queryKey: ['post', postId],
    queryFn: () => fetchPost(postId),
  });

  if (isPending) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

While this approach works, it has several significant drawbacks:

1. Multiple Renders and Performance Issues

On initial render, data is undefined
The component renders in an undefined state
Data fetching begins
Component re-renders when data arrives

This becomes worse with multiple queries:

function PostWithComments() {
  const postQuery = useQuery({...});
  const commentsQuery = useQuery({...});

  if (postQuery.isPending || commentsQuery.isPending) return <div>Loading...</div>;
  if (postQuery.isError || commentsQuery.isError) return <div>Error...</div>;

  return (...);
}

Each query triggers its own re-render, leading to performance degradation.

2. Component Complexity

Handling loading and error states bloats components with boilerplate code:

function ComplexComponent() {
  const query1 = useQuery({...});
  const query2 = useQuery({...});
  const query3 = useQuery({...});

  // Complicated loading logic
  const isLoading = query1.isPending || query2.isPending || query3.isPending;

  // Complicated error handling
  const error = query1.error?.message || query2.error?.message || query3.error?.message;

  if (isLoading) return <Loader />;
  if (error) return <Error message={error} />;

  // Actual component logic...
}

3. Bundle Loading Delays

In modern applications with code splitting:

Navigation occurs
Route bundle loads asynchronously
Component mounts
Data fetching begins

This creates unnecessary delays in data retrieval.

The Solution: Route-Based Data Fetching

The recommended pattern moves data fetching to the route level using loader functions. Here's how it works:

Implementation with TanStack Router

// Route configuration
const postRoute = createRoute({
  path: '/posts/$postId',
  component: PostComponent,
  loader: async ({ params: { postId }, context: { queryClient } }) => {
    await Promise.all([
      queryClient.prefetchQuery({
        queryKey: ['post', postId],
        queryFn: () => fetchPost(postId),
      }),
      queryClient.prefetchQuery({
        queryKey: ['comments', postId],
        queryFn: () => fetchComments(postId),
      }),
    ]);
  },
});

Simplified Component

function PostComponent() {
  const { postId } = useParams();

  // Data is guaranteed to be available
  const { data: post } = useSuspenseQuery({
    queryKey: ['post', postId],
    queryFn: () => fetchPost(postId),
  });

  const { data: comments } = useSuspenseQuery({
    queryKey: ['comments', postId],
    queryFn: () => fetchComments(postId),
  });

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <CommentsList comments={comments} />
    </div>
  );
}

Key Benefits

Single Render: Component renders once with all data available
Simpler Components: No loading/error state handling
Faster Data Fetching: Begins before component bundle loads
Centralized Error Handling: Errors handled at route level

Handling Loading and Error States

With this pattern, loading and error states are managed at the route level:

const postRoute = createRoute({
  // ...other config
  pendingComponent: () => <FullPageSpinner />,
  errorComponent: ({ error }) => <FullPageError error={error} />,
});

Partial Prefetching Pattern

You don't need to prefetch everything. Here's a hybrid approach:

// Prefetch only critical data
loader: async ({ params, context }) => {
  await context.queryClient.prefetchQuery({
    queryKey: ['post', params.postId],
    queryFn: () => fetchPost(params.postId),
  });
}

// Component implementation
function PostComponent() {
  // Critical data (prefetched)
  const { data: post } = useSuspenseQuery(...);

  // Secondary data (fetched on mount)
  const commentsQuery = useQuery({
    queryKey: ['comments', post.id],
    queryFn: () => fetchComments(post.id),
  });

  return (
    <div>
      <article>{/* Post content */}</article>
      {commentsQuery.isPending ? (
        <CommentsLoading />
      ) : (
        <CommentsList comments={commentsQuery.data} />
      )}
    </div>
  );
}

Advanced Patterns

1. Authentication in Loaders

loader: async ({ context }) => {
  if (!context.auth.isAuthenticated) {
    throw new Error('Unauthorized');
  }
  // ...data fetching
}

2. Dependent Queries

loader: async ({ params, context }) => {
  const user = await context.queryClient.fetchQuery({
    queryKey: ['user'],
    queryFn: fetchUser,
  });

  await context.queryClient.prefetchQuery({
    queryKey: ['user-posts', user.id],
    queryFn: () => fetchUserPosts(user.id),
  });
}

3. Optimistic Updates

// In your mutation
const mutation = useMutation({
  mutationFn: updatePost,
  onMutate: async (newPost) => {
    await queryClient.cancelQueries(['post', newPost.id]);
    const previousPost = queryClient.getQueryData(['post', newPost.id]);
    queryClient.setQueryData(['post', newPost.id], newPost);
    return { previousPost };
  },
  onError: (err, newPost, context) => {
    queryClient.setQueryData(['post', newPost.id], context.previousPost);
  },
});

Migration Strategy

If you're working with an existing codebase, here's how to migrate incrementally:

Identify critical routes: Start with high-traffic pages
Create loader functions: Move data fetching from components
Use Suspense boundaries: Wrap routes in Suspense
Gradually convert components: Replace useQuery with useSuspenseQuery
Add error boundaries: Implement at route level

Performance Comparison

Metric	Traditional Approach	Route-Based Fetching
Render cycles	2-3 per query	1
Time to data	Bundle + fetch	Parallel load
Bundle size	Larger components	Leaner components
Error handling	Per component	Centralized

Real-World Example: E-Commerce Product Page

// Route configuration
const productRoute = createRoute({
  path: '/products/$productId',
  component: ProductPage,
  loader: async ({ params, context }) => {
    await Promise.all([
      context.queryClient.prefetchQuery({
        queryKey: ['product', params.productId],
        queryFn: () => fetchProduct(params.productId),
      }),
      context.queryClient.prefetchQuery({
        queryKey: ['related-products', params.productId],
        queryFn: () => fetchRelatedProducts(params.productId),
      }),
      context.queryClient.prefetchQuery({
        queryKey: ['product-reviews', params.productId],
        queryFn: () => fetchProductReviews(params.productId),
      }),
    ]);
  },
  pendingComponent: ProductPageSkeleton,
  errorComponent: ProductErrorPage,
});

// ProductPage component
function ProductPage() {
  const { productId } = useParams();

  const { data: product } = useSuspenseQuery(...);
  const { data: relatedProducts } = useSuspenseQuery(...);
  const { data: reviews } = useSuspenseQuery(...);

  // Defer non-critical data
  const shippingQuery = useQuery({
    queryKey: ['shipping-info', productId],
    queryFn: () => fetchShippingInfo(productId),
  });

  return (
    <div className="product-page">
      <ProductDetails product={product} />
      <RelatedProducts products={relatedProducts} />
      <ProductReviews reviews={reviews} />
      {shippingQuery.isSuccess && (
        <ShippingInfo info={shippingQuery.data} />
      )}
    </div>
  );
}

Conclusion

The route-based data fetching pattern offers significant advantages:

Improved performance: Fewer renders and parallel loading
Cleaner components: Focused on presentation
Better user experience: Faster perceived load times
Easier maintenance: Centralized data logic

While this pattern requires some initial setup (especially with routing libraries), the long-term benefits for application architecture and performance make it worthwhile for most React applications.

Remember that not all data needs to be fetched at the route level - use this pattern for critical data needed immediately, while still using traditional approaches for secondary data that can load after initial render.

👀Are You Over Using `useMemo` and `useCallback` Hooks in React?

Pratham Srivastava — Sat, 23 Dec 2023 19:23:53 +0000

React's useMemo and useCallback hooks are powerful tools designed to optimize performance by memoizing values and functions, respectively. While these hooks can significantly enhance the efficiency of your React components, it's crucial to navigate their usage carefully. This post delves into the common problems and challenges that developers may encounter when employing useMemo and useCallback, providing insights into their optimal usage and potential pitfalls.

1. The Essence of `useMemo` and `useCallback`

Overview

useMemo: Memoizes the result of a computation, preventing unnecessary recalculations when the component re-renders.
useCallback: Memoizes a function instance, ensuring that the same function reference is returned unless dependencies change.

When to Use Them

useMemo: Ideal for computationally expensive operations, preventing redundant calculations.
useCallback: Useful for preventing unnecessary re-renders of child components that depend on callback props.

2. Common Pitfalls with `useMemo`

Misusing Dependency Arrays

const MyComponent = ({ data }) => {
  const processedData = useMemo(() => processData(data), [data]);

  // Component logic using processedData
};

Problem:

Developers might mistakenly include unnecessary dependencies in the array ([data, someOtherProp]).
This can lead to unexpected behaviors, as the memoized value will only update when all dependencies change.

Solution:

Ensure the dependency array contains only the variables that the memoized value directly depends on.

Over-Optimization

const MyComponent = ({ data }) => {
  // Avoid over-optimizing by memoizing everything
  const processedData = useMemo(() => processData(data), [data]);
  const filteredData = useMemo(() => filterData(processedData), [processedData]);

  // Component logic using filteredData
};

Problem:

Excessive use of useMemo can lead to over-optimization, diminishing the benefits and increasing code complexity.

Solution:

Prioritize memoization for computationally expensive operations rather than every variable.

3. Challenges with `useCallback`

Creating Unnecessary Callbacks

const MyComponent = ({ onClick }) => {
  // Unnecessary recreation of callback on each render
  const handleClick = useCallback(() => onClick(), [onClick]);

  return <button onClick={handleClick}>Click me</button>;
};

Problem:

The callback is recreated on each render, defeating the purpose of useCallback.

Solution:

Use useCallback when the identity of the function needs to remain stable across renders.
If the callback doesn't have dependencies, consider using the function directly.

Dependency Array Dilemmas

const MyComponent = ({ fetchData, userId }) => {
  // Including userId in the dependency array
  const memoizedFetchData = useCallback(() => fetchData(userId), [fetchData, userId]);

  // Component logic using memoizedFetchData
};

Problem:

Including a function and its dependencies in the dependency array can lead to unnecessary re-creation.

Solution:

Separate the dependencies: use useCallback for the function and useMemo for its dependencies.

4. Conclusion: Navigating the Memoization Maze

Understanding the intricacies of useMemo and useCallback is paramount for writing efficient and performant React components. By being mindful of dependency arrays, avoiding over-optimization, and making informed decisions on when to use these hooks, developers can navigate the memoization maze successfully. Remember, the goal is not to blindly apply these hooks everywhere but to use them strategically where their benefits shine.

Happy coding! 🚀💻

Mastering useEffect in React: Navigating Initial Render Challenges with useRef 🚀

Pratham Srivastava — Sat, 23 Dec 2023 18:49:44 +0000

In the ever-evolving landscape of React development, the shift towards using function components over class components has gained considerable momentum. The allure of their concise syntax, smaller footprint, and the ability to empower child UI elements to manage their own state is undeniable. However, like any technological advancement, function components present their own set of challenges. A notable drawback is the lack of control over the initial render functionality, a challenge that becomes apparent in the useEffect hook.

Understanding useEffect

The useEffect hook is a cornerstone for React developers, providing a mechanism to queue actions based on a component's state. Its significance becomes pronounced when managing stateful components, enabling them to respond dynamically to user interactions and data changes. Despite its utility, useEffect has a limitation – its callback is invoked during the initial render, potentially causing unintended side effects.

Encountering the Issue

Consider a practical scenario involving the development of a form page where users can select an item from a list and view its details. Imagine implementing a search bar that triggers an API call on user input. The challenge arises when, upon the initial page load, useEffect is invoked with either an undefined or empty string as the query term, resulting in unnecessary API calls. This behavior is undesirable and demands a solution.

Using useRef to Bypass Initial Render useEffect Calls

To address the issue, an effective approach involves leveraging the useRef hook. While the documentation may not explicitly mention it, the useEffect hook triggers during the initial render as the state variables are initially set. By employing a useRef variable, such as hasPageBeenRendered, and wrapping the useEffect callback in a conditional statement, developers can bypass the unwanted API calls during the initial render. This ensures that useEffect is only invoked in response to user interactions.

const MyComponent = () => {
  const hasPageBeenRendered = useRef(false);
  const [query, setQuery] = useState('');

  useEffect(() => {
    if (hasPageBeenRendered.current) {
      // API call logic here
    } else {
      hasPageBeenRendered.current = true;
    }
  }, [query]);

  // Rest of the component logic
};

Managing Multiple useEffects with useRef

While the above solution works seamlessly, it becomes even more powerful when dealing with multiple useEffect hooks. Instead of cluttering the component with individual useRef variables for each useEffect, a cleaner approach is to use a hash-based useRef. This involves setting the useRef value to a hash where each key corresponds to a different useEffect, streamlining the management of complex logic.

const MyComponent = () => {
  const hasBeenRendered = useRef({ apiCall: false, anotherEffect: false });
  const [query, setQuery] = useState('');

  useEffect(() => {
    if (hasBeenRendered.current.apiCall) {
      // API call logic here
    } else {
      hasBeenRendered.current.apiCall = true;
    }
  }, [query]);

  useEffect(() => {
    if (hasBeenRendered.current.anotherEffect) {
      // Another effect logic here
    } else {
      hasBeenRendered.current.anotherEffect = true;
    }
  }, [/* dependencies for another effect */]);

  // Rest of the component logic
};

Conclusion

In conclusion, while the useEffect hook is a powerful tool for managing stateful components, its behavior during the initial render can introduce unwanted side effects. The strategic use of the useRef hook provides an elegant solution, allowing developers to bypass the initial render calls and maintain control over their component's lifecycle. By adopting this approach, React developers can enhance the predictability and efficiency of their applications.

I'd love to hear about your experiences with useEffect and useRef. Have you encountered similar challenges, or do you have alternative approaches to share? Feel free to leave a comment below! 💬

🚀 Elevating Your Frontend Game: The Trio for Promotion! 💻

Pratham Srivastava — Sat, 23 Dec 2023 09:42:41 +0000

Hey there, frontend enthusiasts! Ready to level up your game and snag that promotion? Today, we're diving into the magic that can set you apart in your frontend development job. Buckle up for a fun ride into the realms of testing, web accessibility, and web performance – the keys to career success! 🌟

1. Testing 🧪

Testing isn't just about finding bugs; it's about crafting resilient code that stands the test of time! 🦠

Comprehensive Unit Testing 🎯

Show off your prowess in writing unit tests that put superheroes to shame. With libraries like Jest and React Testing Library, your components will be bulletproof. 💪

Integration Testing and E2E Magic 🚀

Go beyond the basics! Master integration testing to ensure your components play well together. Dive into the world of E2E testing with tools like Cypress or Selenium – your app will thank you! 🌐

Test Automation and CI/CD Bliss 🔄

Automate, automate, automate! Become the testing maestro by setting up robust automation scripts and integrating them seamlessly into your CI/CD pipeline. Jenkins, Travis CI, GitHub Actions – choose your testing orchestra! 🎻

2. Web Accessibility ♿️

Building for everyone is not just noble; it's a career game-changer! Let's make the web accessible to all.

Empathy-Driven Development 🌈

Put yourself in the shoes of users with diverse needs. Write code that sings to screen readers, embraces keyboard navigation, and ensures a delightful experience for everyone. 🤝

ARIA Land of Wonders 🧚‍♂️

Become the ARIA (Accessible Rich Internet Applications) wizard! Sprinkle ARIA attributes to enhance the semantics of your web elements and create a symphony of accessibility. 🎶

Automated Accessibility Testing 🤖

Bring in the bots! Integrate automated accessibility testing tools like Axe or Pa11y into your workflow. Catch those accessibility gremlins before they become bugs. 🚫🐛

3. Web Performance 🚀

Speed matters! Your users want a Ferrari, not a horse and buggy. Let's make your frontend lightning-fast.

Optimize Those Assets 🖼️

Become a Picasso of optimization! Minify, compress, and lazy-load your assets. Your images will be svelte, and your JavaScript will be as nimble as a gazelle. 🏎️💨

Efficient DOM Manipulation 🧙‍♂️

Master the art of DOM manipulation. Less reflows, more efficiency! Your users will love you for it, and your browser will throw confetti in celebration. 🎉

Performance Monitoring and Profiling 🔍

Become a detective of slowness! Use tools like Lighthouse, Chrome DevTools, and WebPageTest to uncover bottlenecks and ensure your app performs like a rockstar. 🎸🌟

Conclusion 🌈

There you have it – the trio of testing, web accessibility, and web performance that can skyrocket your frontend career. Be the superhero your codebase deserves, and promotions will chase you like shooting stars! 🚀✨ Happy coding! 🎉

🌟 Unleashing React Code Splitting: The Epic Guide! 🚀

Pratham Srivastava — Sat, 23 Dec 2023 09:25:18 +0000

Welcome to the React wonderland, where speed and user joy reign supreme! 🎉 Today, we embark on a thrilling journey to master the art of React code splitting. Buckle up as we break down your JavaScript bundle, transforming it into a nimble, on-demand powerhouse. This not only slashes load times but also turns your app into a performance maestro, leaving users grinning from ear to ear. Let's dive into the magical world of React code splitting, one step at a time!

What's this Code Splitting Magic? ✨

Imagine a world where you don't have to carry the entire codebase on your shoulders. Code splitting is the secret sauce that slices and dices your JavaScript bundle, serving only what's needed. Faster loading, efficient resource usage, and a silky-smooth user experience – that's the magic we're talking about!

Prerequisites 🚀

Before we embark on our journey, make sure you have React installed and a React project set up. If not, fear not! Create React App is your trusty sidekick for a quick start.

Step 1: Summon React Lazy and Suspense 🧙‍♂️

Our dynamic duo – React Lazy and Suspense – are the heroes of code splitting. They let you summon components lazily, only when the time is right. Time to install them with a magical incantation:

npm install react@latest react-dom@latest

Step 2: Craft a Lazy-Loaded Component 🎨

Meet our star, LazyComponent. Craft a cozy home for it in a file named LazyComponent.js:

// LazyComponent.js
import React from 'react';

const LazyComponent = () => {
  return <div>This is a lazy-loaded component! 🚀✨</div>;
};

export default LazyComponent;

Step 3: Enter the Realm of React Lazy 🚪

Time to summon LazyComponent using React.lazy. Open the gates in App.js:

// App.js
import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading... 🕒</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

export default App;

Step 4: Launch Your Application 🚀

Fire up your development server and watch the enchantment unfold:

npm start

Visit your application, and behold! LazyComponent emerges only when summoned.

Step 5: Dynamic Imports, the Wizard's Touch ⚡

For a touch of wizardry, use dynamic imports to load components based on user whims. Update App.js:

// App.js
import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  const shouldLoadLazyComponent = true; // Replace with your condition

  const LazyComponentWrapper = shouldLoadLazyComponent
    ? lazy(() => import('./LazyComponent'))
    : null;

  return (
    <div>
      {shouldLoadLazyComponent ? (
        <Suspense fallback={<div>Loading... 🕒</div>}>
          <LazyComponentWrapper />
        </Suspense>
      ) : (
        <div>Lazy component is not loaded 🙅‍♂️</div>
      )}
    </div>
  );
};

export default App;

The Grand Finale 🎉

Hats off, maestro! You've mastered React code splitting – the art of performance enchantment. Experiment with different components and conditions to fine-tune your magical recipe. May your React apps be swift and your users forever delighted! Happy coding! 🚀🌈

🚀 Mastering Infinite Scrolling with React and Intersection Observer API 🔄

Pratham Srivastava — Sat, 23 Dec 2023 09:21:08 +0000

Welcome to the world of dynamic web experiences! Today, we're diving into the Intersection Observer API, a powerful tool that brings life to features like lazy loading, infinite scrolling, and more. Let's explore the key concepts and build a stylish infinite scrolling product grid using React.

Key Concepts 🧠

1. Observer 👀

An IntersectionObserver watches target elements and triggers a callback on intersection changes.
Monitors one or more target elements for changes in their intersection status.

2. Target Element 🎯

The observed element, known as the "target element," is the one undergoing intersection monitoring.

3. Intersection Ratio 📏

Represents the ratio of the target element's intersection with the root (viewport).
0 means no intersection, 1 means the entire element is within the viewport.

4. Thresholds 🎯

Configurable values (0 to 1) triggering the callback when the intersection ratio crosses them.

5. Root and Root Margin 🌐

root: Element for intersection checking (default is the browser's viewport).
rootMargin: Margin around the root or specified ancestor to adjust intersection triggering.

Basic Usage 🔧

const observer = new IntersectionObserver(callback, options);
observer.observe(targetElement);

callback: Function triggered on intersection changes, receiving an array of IntersectionObserverEntry objects.
options: Configuration object for the observer.

IntersectionObserverEntry 📊

Object providing details about the intersection between the target element and the root.

{
  time: DOMHighResTimeStamp,
  target: Element,
  rootBounds: DOMRectReadOnly,
  boundingClientRect: DOMRectReadOnly,
  intersectionRect: DOMRectReadOnly,
  intersectionRatio: number,
  isIntersecting: boolean,
}

Putting it into Action 🚀

Let's create an infinite scrolling product grid with React and Intersection Observer. Check out the code below with some added emojis for extra flair! 🎉

// Your React Component
import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const PRODUCTS_PER_LOAD = 10;

// Mock API for fetching products
const mockAPI = {
  fetchProducts: (start, limit) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(
          Array.from({ length: limit }).map((_, idx) => ({
            id: start + idx,
            name: `Product ${start + idx}`,
            image: 'https://via.placeholder.com/150',
          }))
        );
      }, 1000);
    });
  },
};

function InfiniteScrollProducts() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const loadMoreRef = useRef(null); 

  useEffect(() => {
    loadMoreProducts();

    const observer = new IntersectionObserver(
      (entries, observerInstance) => {
        if (entries[0].isIntersecting && !loading) {
          loadMoreProducts();
        }
      },
      { threshold: 1.0 }
    );

    // start observing the loadMore button
    if (loadMoreRef.current) {
      observer.observe(loadMoreRef.current);
    }

    return () => {
      if (loadMoreRef.current) {
        observer.unobserve(loadMoreRef.current);
      }
    };
  }, [products, loading]);

  const loadMoreProducts = async () => {
    setLoading(true);
    const newProducts = await mockAPI.fetchProducts(
      products.length,
      PRODUCTS_PER_LOAD
    );
    setProducts((prev) => [...prev, ...newProducts]);
    setLoading(false);
  };

  return (
    <div>
      <div className="products-grid">
        {products.map((product) => (
          <div key={product.id} className="product-card">
            <img src={product.image} alt={product.name} />
            <h3>{product.name}</h3>
          </div>
        ))}
      </div>
      {loading && <p ref={loadMoreRef}>Loading... 🔄</p>}
    </div>
  );
}

// Render the component
ReactDOM.render(<InfiniteScrollProducts />, document.getElementById('root'));

Now you have a dazzling infinite scrolling product grid that dynamically loads more items as you scroll. Happy coding! 🚀🎨

A Comprehensive Guide to Writing Custom Hooks ✨"

Pratham Srivastava — Tue, 19 Dec 2023 14:58:04 +0000

React's hooks have revolutionized the way developers handle state and side effects in functional components. Custom hooks extend this power by enabling the creation of reusable logic across multiple components. In this guide, we'll delve into the world of custom hooks, exploring what they are, why they are valuable, and how to write your own to supercharge your React development.

What Are Custom Hooks? 🎣

In React, hooks are functions that allow functional components to manage state, effects, context, and more. Custom hooks, in essence, are user-defined hooks created by developers to encapsulate and reuse logic across components. They are an excellent way to abstract complex logic into manageable and shareable units.

Why Use Custom Hooks? 🚀

Reusability: Custom hooks promote the DRY (Don't Repeat Yourself) principle, allowing you to reuse logic without duplicating code across components.
Separation of Concerns: By isolating logic in custom hooks, components can focus on rendering and maintaining their specific state, resulting in cleaner and more maintainable code.
Readability: Custom hooks make code more readable by abstracting away intricate details, providing a higher-level overview of a component's functionality.

Anatomy of a Custom Hook 🖋️

Creating a custom hook is a straightforward process. Let's break down the steps:

Start with "use": Custom hooks conventionally start with the word "use" to adhere to React's naming convention. For example, useCustomHookName.
Define the Hook: Write the function and encapsulate the logic you want to reuse.
Return Values: Ensure your custom hook returns values or functions needed by components. This could include state variables, functions, or any other data.

Writing a Simple Custom Hook 📝

Let's create a simple custom hook to manage a toggle state:

import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => {
    setValue(!value);
  };

  return [value, toggle];
}

Using the Custom Hook 🚦

Now you can use this custom hook in any component:

import React from 'react';
import useToggle from './useToggle';

function ToggleComponent() {
  const [isToggled, toggle] = useToggle(false);

  return (
    <div>
      <p>Is Toggled: {isToggled ? 'Yes' : 'No'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

Tips for Writing Custom Hooks 🌟

Keep It Single-Purpose: Aim for single-purpose custom hooks to enhance reusability and maintainability.
Descriptive Names: Choose descriptive names for your custom hooks to convey their purpose clearly.
Dependencies: If your custom hook relies on external libraries or context, ensure to include them as dependencies.
Document Your Hooks: Write documentation or comments to explain how to use your custom hooks, including parameters and return values.

Conclusion 🎉

Mastering the art of writing custom hooks in React unlocks a powerful tool for building scalable and maintainable applications. By encapsulating logic, you create components that are focused, reusable, and easier to understand. Incorporate custom hooks into your React toolkit and elevate your development experience to new heights. Happy coding! 🚀

Virtual DOM in React: Where It Lives and How It Boosts Performance

Pratham Srivastava — Tue, 19 Dec 2023 14:46:53 +0000

When working with React, developers often encounter the term "Virtual DOM" and its pivotal role in optimizing web application performance. In this in-depth exploration, we'll unravel the mysteries surrounding the Virtual DOM, answering a fundamental question: "Where is Virtual DOM stored in React?" Join us as we dissect the inner workings of React, shedding light on how the Virtual DOM is created, managed, and leveraged to build responsive and efficient web applications.

What Is the Virtual DOM?

Before delving into the specifics of where the Virtual DOM is stored, let's briefly introduce the concept itself and its significance in React. The Virtual DOM is a lightweight, in-memory representation of the actual Document Object Model (DOM), serving as a key component in React's strategy for efficiently updating the UI and optimizing performance.

Creation and Representation of the Virtual DOM:

Creating the Virtual DOM

Initial Render: React creates a Virtual DOM tree mirroring the component's structure and content during the initial render.
Subsequent Renders: Changes in state or props trigger the creation of a new Virtual DOM tree, representing the updated UI.

Structure of the Virtual DOM

The Virtual DOM tree closely resembles the real DOM, with elements representing HTML elements, attributes mirroring real DOM attributes, and nested elements as children.

Updating the Virtual DOM

When a component's state or props change, React goes through a process of updating the Virtual DOM.
The Virtual DOM comparison involves detecting differences, or "diffs," between the new and previous Virtual DOM trees.

Reconciliation Process:

Virtual DOM Updates

State or Prop Change: Triggered by an event or user interaction, React detects changes in state or props.
Re-render: The component re-renders, creating a new Virtual DOM tree for the updated UI.
Virtual DOM Comparison: React compares the new and previous Virtual DOM trees through a process known as "diffing."
Reconciliation: Elements are created, deleted, or updated based on the differences, ensuring efficient updates in the real DOM.

Where Is the Virtual DOM Stored?

The Virtual DOM is stored entirely in memory as a JavaScript object. It exists in the memory space of your web browser or server (for server-side rendering). It's not a visible part of your application but an internal data structure used by React for diffing and rendering. This separation from the real DOM is fundamental to React's performance optimizations.

The Role of the Real DOM:

While the Virtual DOM handles efficient rendering and updating, the real DOM is responsible for displaying content to users. React updates the real DOM based on differences identified in the Virtual DOM comparison, involving modifications to HTML elements, attribute changes, element additions or removals, and text content updates.

Benefits of the Virtual DOM:

Performance Optimization: Minimizes direct interactions with the slower real DOM, enhancing overall performance.
Consistency: Ensures a consistent view of the UI, making it easier to reason about the application's state.
Efficiency: Updates are targeted and efficient, reducing unnecessary re-renders and improving responsiveness.
Developer Productivity: Simplifies development by providing a virtual representation of the DOM, aiding in building and maintaining complex UIs.

In this exploration, we've demystified the Virtual DOM in React, clarifying where it is stored and its pivotal role in optimizing rendering and updating processes. Armed with this understanding, developers can make informed decisions to build performant and efficient web applications that deliver a smooth user experience. As you continue your React journey, remember that a solid grasp of the Virtual DOM is a valuable tool in your toolkit for modern web development.

20 ReactJS Best Practices Learned From Code Reviews 🚀

Pratham Srivastava — Mon, 18 Dec 2023 20:30:56 +0000

Are you diving into the world of React development? Whether you're a beginner or an experienced developer, it's crucial to follow best practices to ensure clean, efficient, and maintainable code. In this post, we'll explore 20 ReactJS best practices learned from thorough code reviews.

1. Component Structure:

Separate Components: Divide complex components into smaller, manageable ones.
Container and Presentational Components: Distinguish between container components (handling logic) and presentational components (handling UI).

2. State Management:

Use State Wisely: Keep state local whenever possible, and use state management libraries like Redux for complex state needs.
Immutable State: Avoid directly modifying state; use functions like setState or immutability libraries.

3. Props:

Default Props: Set default values for props when applicable.
Destructuring Props: Use object destructuring for cleaner code when accessing props.

4. Event Handling:

Bind in the Constructor: Bind event handlers in the constructor or use arrow functions to prevent unnecessary re-renders.
Avoid Arrow Functions in Render: Don't use arrow functions directly in render for event handlers.

5. Conditional Rendering:

Ternary Operators: Prefer ternary operators for simple conditions; use && for concise conditional rendering.
Avoid Inline If with Logical &&: Be cautious with inline if statements using && for readability.

6. Styling:

CSS Modules or Styled Components: Use CSS modules or styled components for scoped and maintainable styling.
Avoid Inline Styles: Minimize the use of inline styles for better separation of concerns.

7. Mapping and Keys:

Unique Keys: Provide unique keys when mapping over arrays to help React identify and update elements efficiently.

8. PropTypes:

Type Checking: Use PropTypes to perform runtime type checking and document component expectations.

9. Code Organization:

Folder Structure: Adopt a logical folder structure for components, styles, and other resources.
Index Files: Utilize index.js files for cleaner imports and exports.

10. Performance:

Memoization: Employ React.memo for functional components to prevent unnecessary re-renders.
Avoid Repeated Rendering: Use useMemo and useCallback for optimizing expensive computations and functions.

11. Lifecycle Methods:

Use Effect Dependencies: Specify dependencies in the useEffect hook to avoid unexpected behavior.

12. Error Boundaries:

Wrap Components: Encapsulate components with error boundaries to catch and handle errors gracefully.

13. Testing:

Unit Tests: Write unit tests using libraries like Jest and Enzyme to ensure component functionality.
Snapshot Testing: Use snapshot testing for UI components to track changes over time.

14. Accessibility:

Semantic HTML: Employ semantic HTML elements for improved accessibility.
Aria Roles: Include ARIA roles and attributes for better screen reader support.

15. Routing:

React Router: Use React Router for declarative routing in React applications.

16. Comments:

Meaningful Comments: Add comments sparingly, focusing on clarifying complex logic or important details.

17. Hooks:

Understand Hook Rules: Follow the rules and guidelines for using hooks to prevent issues.

18. Fragment Usage:

Avoid Unnecessary Wrappers: Use fragments (<>...</>) to avoid unnecessary wrapper divs in the DOM.

19. Versioning:

React Version: Keep React and related dependencies up to date for access to new features and performance improvements.

20. Continuous Learning:

Stay Updated: React evolves, so stay updated with official documentation and community best practices.

By incorporating these best practices into your React development workflow, you'll contribute to a more robust and maintainable codebase. Remember, the React ecosystem is dynamic, so keep exploring new patterns and techniques for continuous improvement. Happy coding! 🚀👩‍💻 #ReactJS #BestPractices #CodeReviews

✅Elevating Code Quality: Best Practices for Developers🚀

Pratham Srivastava — Mon, 18 Dec 2023 20:00:28 +0000

Starting a new job is always exciting, but the initial thrill can quickly turn into dismay when faced with a chaotic codebase. In this post, we'll explore common challenges developers encounter in new projects and propose essential practices for maintaining clean, organized, and efficient code.

1. Use of Absolute Paths Instead of Relative Paths:

When entering a new project, replace convoluted relative paths with absolute paths for improved readability. Configuration adjustments may be needed, especially when using Webpack or TypeScript.

// Webpack (create-react-app)
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

// TypeScript
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

This practice simplifies imports, transforming code like this:

import { Button } from '../../../../components/Button'

Into something cleaner:

import { Button } from '@/components/Button'

2. Using “Export Barrel” for Module Organization:

Enhance code readability and maintenance by adopting the "export barrel" technique. Create an index.js file in a folder and export all modules from that folder.

// components/index.ts
export * from './Button'
export * from './Icon'
export * from './Input'

Now, importing components becomes concise:

import { Button, Icon, Input } from '@/components'

3. Choosing Between “Export Default” and “Named Export”:

Prefer "Named Export" over "Export Default" to avoid conflicts and improve code clarity. Reserve "Export Default" for specific use cases like Next.js routes or React.lazy.

// components/Button.tsx
export const Button = () => {
  return <button>Button</button>
}

// Importing
import { Button } from '@/components'

4. Proper File Naming Conventions:

Organize your project by adopting a clear file naming convention. Group related files within dedicated folders, specifying the purpose of each file.

--components
----Button
------index.ts
------types.ts
------styles.css
------utils.ts
------component.tsx

This structure facilitates easy identification of file roles and simplifies searches.

5. Proper Use of ESLint and Prettier for Code Standardization:

Maintain code consistency across teams by integrating ESLint and Prettier. Enforce coding standards and formatting rules to ensure a unified codebase.

// Example ESLint configuration
{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
    // Other rules
  }
}

6. Husky and Lint-Staged: Reinforcing Code Standardization:

Enhance code quality by employing Husky and Lint-Staged to enforce ESLint and Prettier rules before committing or pushing code.

// Example Husky configuration
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

These tools provide an extra layer of control, ensuring code adheres to established guidelines.

7. Custom Hooks for Logic Reusability:

Improve code modularity by creating custom hooks for logic that needs reuse. Whether it's navigation, API calls, or other functionalities, encapsulating logic in custom hooks promotes clean and reusable code.

// Example custom navigation hook
export const useRouter = () => {
  const navigate = useCallback((path: Routes) => goTo(path), [goTo])
  return { navigate }
}

8. The Difference Between Hooks and Utility Functions:

Distinguish between hooks and utility functions. Hooks are components without a visual part, created externally to React, while utility functions are created once and used anywhere.

// Example utility function
export const formatHour = (date: number) => {
  return new Date(date).toLocaleTimeString('pt', { timeStyle: 'short' })
}

9. Using useCallback and useMemo for Performance Optimization:

Optimize React performance by selectively using useCallback and useMemo to memoize functions and values. Be cautious not to overuse these hooks, as excessive memoization can impact performance negatively.

10. Logic Separation:

Keep pages simple and separate logic when possible. Create dedicated components or hooks for specific functionalities like toast logic, API calls, and reusable components.

By incorporating these best practices into your workflow, you can contribute to maintaining a clean, organized, and efficient codebase. Continuous learning and adaptability are key in the ever-evolving field of software development. Elevate the quality of your work, stand out as a developer, and keep exploring new approaches for long-term success. #CodeQuality #BestPractices #SoftwareDevelopment

✔9 Tricks For Enhancing JavaScript Code Readability and Efficiency

Pratham Srivastava — Mon, 18 Dec 2023 19:28:48 +0000

1. The Ternary Operator:

// ❌ Not-so-good
let hungry = true;
let eat;
if (hungry === true) {
   eat = 'yes';
} else {
   eat = 'no';
}

// ✅ BETTER
let hungry = true;
let eat = hungry === true ? 'yes' : 'no';

Utilizing the ternary operator enhances code conciseness, making it more readable and efficient.

2. Populating an Array:

// ❌ Not-so-good
for(let i=0; i < arraySize; i++){
   filledArray[i] {'hello' : 'goodbye'};
}

// ✅ BETTER
let filledArray = new Array(4).fill(null).map(()=> ({'hello' : 'goodbye'}));
console.log(filledArray);

Leveraging array methods like fill and map provides a cleaner and more idiomatic approach to array creation.

3. Dynamic Properties in Objects:

// ❌ Not-so-good
let dynamic = "value"; 
let user = {
     id: 1,
};
user[dynamic] = "other value";

// ✅ BETTER
let dynamic = "value"; 
let user = {
    id: 1,
    [dynamic]: "other value"
};

Embracing computed property names enhances code expressiveness and maintains clarity.

4. Array to Object:

// ❌ Not-so-good
let arr = ["value1", "value2", "value3"]; 
let arrObject = {};
for (let i = 0; i < arr.length; ++i) {
   if (arr[i] !== undefined) {
     arrObject[i] = arr[i];
   }
}

// ✅ BETTER
let arr = ["value1", "value2", "value3"]; 
let arrObject = {...arr};

// Output: { '0': 'value1', '1': 'value2', '2': 'value3' }

Using the spread operator simplifies the process of converting an array to an object.

5. Short Circuit Conditionals:**

// ❌ Not-so-good
if (docs) {
    goToDocs();
}

// ✅ BETTER
docs && goToDocs();

Short-circuiting provides a concise way to handle conditional execution based on truthy values.

6.Object keys are stored in insertion order

const obj = {
  name: "Rahul", 
  age: 16, 
  address: "Earth", 
  profession: "Developer", 
};

console.log(Object.keys(obj)); // name, age, address, profession

7.Check if value is an array

const arr = [1, 2, 3]; 
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true

8.Difference between double equal and triple equal

// Double equal - Converts both the operands to the same type and then comapares
console.log(0 == '0'); // true

// Triple Equal - Does not convert t same type
console.log(0 === '0'); // false

9.Truthy and False values

False values => false, 0, ""(empty string), null, undefined, &NaN.

Truthy values => "Values", "0", {}(empty object), &[](empty array)

Enhance your JavaScript coding style by incorporating these practices for improved readability and efficiency. #JavaScript #CodingTips #WebDevelopment

DEV Community: Pratham Srivastava

🌟 Latest CSS Features in 2024-2025: What's New and Exciting?

1. :has() - The Parent Selector ✅

Use cases:

2. @scope - Scoped Styling (Experimental) 🚀

Use cases:

3. CSS Nesting ✅

Benefits:

4. color-mix() and relative-color() 🚀

5. Container Queries ✅

Use cases:

6. View Transitions API (CSS + JS) 🚀

7. Anchor Positioning 🌌

8. accent-color ✅

9. :nth-child(An+B of S) Advanced Selectors ✅

10. Logical Properties ✅

Summary Table

Final Thoughts

Data Fetching Patterns in React: A Comprehensive Guide

The Traditional Approach and Its Drawbacks

1. Multiple Renders and Performance Issues

2. Component Complexity

3. Bundle Loading Delays

The Solution: Route-Based Data Fetching

Implementation with TanStack Router

Simplified Component

Key Benefits

Handling Loading and Error States

Partial Prefetching Pattern

Advanced Patterns

1. Authentication in Loaders

2. Dependent Queries

3. Optimistic Updates

Migration Strategy

Performance Comparison

Real-World Example: E-Commerce Product Page

Conclusion

👀Are You Over Using `useMemo` and `useCallback` Hooks in React?

1. The Essence of useMemo and useCallback

Overview

When to Use Them

2. Common Pitfalls with useMemo

Misusing Dependency Arrays

Problem:

Solution:

Over-Optimization

Problem:

Solution:

3. Challenges with useCallback

Creating Unnecessary Callbacks

Problem:

Solution:

Dependency Array Dilemmas

Problem:

Solution:

4. Conclusion: Navigating the Memoization Maze

Mastering useEffect in React: Navigating Initial Render Challenges with useRef 🚀

Understanding useEffect

Encountering the Issue

Using useRef to Bypass Initial Render useEffect Calls

Managing Multiple useEffects with useRef

Conclusion

🚀 Elevating Your Frontend Game: The Trio for Promotion! 💻

1. Testing 🧪

Comprehensive Unit Testing 🎯

Integration Testing and E2E Magic 🚀

Test Automation and CI/CD Bliss 🔄

2. Web Accessibility ♿️

Empathy-Driven Development 🌈

ARIA Land of Wonders 🧚‍♂️

Automated Accessibility Testing 🤖

3. Web Performance 🚀

Optimize Those Assets 🖼️

Efficient DOM Manipulation 🧙‍♂️

Performance Monitoring and Profiling 🔍

Conclusion 🌈

🌟 Unleashing React Code Splitting: The Epic Guide! 🚀

What's this Code Splitting Magic? ✨

Prerequisites 🚀

Step 1: Summon React Lazy and Suspense 🧙‍♂️

1. `:has()` - The Parent Selector ✅

2. `@scope` - Scoped Styling (Experimental) 🚀

4. `color-mix()` and `relative-color()` 🚀

8. `accent-color` ✅

9. `:nth-child(An+B of S)` Advanced Selectors ✅

1. The Essence of `useMemo` and `useCallback`

2. Common Pitfalls with `useMemo`

3. Challenges with `useCallback`