Forem: Fatemeh Paghar

useTransition in React: Building a High-Performance Search for 50K Record Case Study

Fatemeh Paghar — Sun, 20 Apr 2025 11:23:24 +0000

Introduction

When building modern web applications, ensuring smooth user interactions is critical. React, with its powerful declarative UI updates and component-based architecture, offers great flexibility. However, as the application grows in complexity, performance can degrade, especially when dealing with large datasets or intensive user interactions. This article highlights the challenges we faced when implementing a simple search filter in React and how we overcame performance issues by optimizing the component.

The Problem: User Interaction with Large Datasets

Imagine an application that displays a large list of users, and the user can filter this list by typing in a search box. At first glance, this seems like a simple task, but as we scale the number of users, even small inefficiencies can lead to significant performance problems.
We initially built a search filter component that allowed users to filter through a list of 5,000 users by name or email. The interaction involved typing in an input field and dynamically filtering the list as the user typed. The performance, however, quickly became problematic.

The Original Approach

Here is the first version of our component:

import React, { useState, useTransition } from "react";

// 🔧 Fake user generator
const generateUsers = (count: number) => {
  const names = ["Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace", "Helen"];
  return Array.from({ length: count }, (_, i) => ({
    id: i,
    name: `${names[i % names.length]} ${i}`,
    email: `user${i}@example.com`,
  }));
};

const usersData = generateUsers(5000);

export default function MassiveSearchFilter() {
  const [query, setQuery] = useState("");
  const [filteredUsers, setFilteredUsers] = useState(usersData);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (e: { target: { value: any; }; }) => {
    const value = e.target.value;
    setQuery(value);

    startTransition(() => {
      const lower = value.toLowerCase();
      const filtered = usersData.filter(
        (user) =>
          user.name.toLowerCase().includes(lower) ||
          user.email.toLowerCase().includes(lower)
      );
      setFilteredUsers(filtered);
    });
  };

  const highlight = (text: string, query: string) => {
    if (!query) return text;
    const index = text.toLowerCase().indexOf(query.toLowerCase());
    if (index === -1) return text;
    return (
      <>
        {text.slice(0, index)}
        <mark className="bg-pink-200 text-black">
          {text.slice(index, index + query.length)}
        </mark>
        {text.slice(index + query.length)}
      </>
    );
  };

  return (
    <div className="min-h-screen bg-gray-100 p-6 font-sans">
      <div className="max-w-3xl mx-auto bg-white p-6 rounded-2xl border-2 border-pink-200 shadow-md">
        <h1 className="text-2xl font-bold text-pink-600 mb-4">
          👩‍💻 Massive Search Filter (5,000 Users)
        </h1>

        <input
          type="text"
          value={query}
          onChange={handleSearch}
          placeholder="Search name or email..."
          className="w-full p-3 mb-4 border-2 border-pink-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400"
        />

        {isPending && (
          <div className="text-pink-500 italic mb-2 text-sm animate-pulse">
            🔄 Loading results...
          </div>
        )}

        <div className="max-h-[500px] overflow-y-auto divide-y divide-pink-100 border-t border-pink-100">
          {filteredUsers.map((user) => (
            <div
              key={user.id}
              className="p-3 hover:bg-pink-50 transition-colors duration-150"
            >
              <p className="font-medium text-gray-800 text-base">
                {highlight(user.name, query)}
              </p>
              <p className="text-sm text-gray-500">
                {highlight(user.email, query)}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Challenges Faced

At first, everything seemed fine. The search was fast, and the results appeared almost instantly. However, as we started testing with larger datasets (e.g., 5,000+ users), the following issues quickly became evident:

Performance Bottleneck:
The component would slow down significantly when typing quickly in the search field.
React re-renders the entire list of 5,000 users with each keystroke, causing delays in UI updates.
UI Freezing:
Since the search filter was directly tied to the input field and user interactions, typing or deleting text quickly caused the UI to freeze, as React was overwhelmed with filtering and re-rendering thousands of DOM nodes.
Over-reliance on Filtering:
Every change in the search input would trigger a full filter of the list, even when the user was still typing, which was inefficient.

The Optimization Process

After identifying the issues, we applied several techniques to improve the performance and user experience:

Step 1: Use `react-window` for Virtualization

Rendering 5,000+ items is a classic case for virtualization. We decided to use react-window, which allows React to only render the items that are visible in the viewport. This means that even with large datasets, we don't need to render the entire list, drastically reducing the load on the browser.

Step 2: Memoization of Filtered Results

By using the useMemo hook, we memoized the filtered results based on the query. This ensures that the filtering computation only happens when the query changes, rather than on every render.

Step 3: Implementing `startTransition` for Smooth UI Updates

The useTransition hook allows us to prioritize updates to the input field while deferring the filtering computation. This ensures that the UI remains responsive while the app performs the more expensive task of filtering.

The Optimized Component

Here’s the optimized version of the component after these changes:

import React, { useState, useMemo, useTransition } from "react";
import { FixedSizeList as List } from "react-window";

const generateUsers = (count: number) => {
  const names = ["Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace", "Helen"];
  return Array.from({ length: count }, (_, i) => ({
    id: i,
    name: `${names[i % names.length]} ${i}`,
    email: `user${i}@example.com`,
  }));
};

const usersData = generateUsers(5000);

export default function MassiveSearchFilter() {
  const [query, setQuery] = useState("");
  const [isPending, startTransition] = useTransition();

  const filteredUsers = useMemo(() => {
    const lower = query.toLowerCase();
    return usersData.filter(
      (user) =>
        user.name.toLowerCase().includes(lower) ||
        user.email.toLowerCase().includes(lower)
    );
  }, [query]);

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    startTransition(() => setQuery(value));
  };

  const highlight = (text: string, query: string) => {
    if (!query) return text;
    const index = text.toLowerCase().indexOf(query.toLowerCase());
    if (index === -1) return text;
    return (
      <>
        {text.slice(0, index)}
        <mark className="bg-pink-200 text-black">
          {text.slice(index, index + query.length)}
        </mark>
        {text.slice(index + query.length)}
      </>
    );
  };

  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => {
    const user = filteredUsers[index];
    return (
      <div
        style={style}
        key={user.id}
        className="p-3 border-b border-pink-100 hover:bg-pink-50"
      >
        <p className="font-medium text-gray-800 text-base">
          {highlight(user.name, query)}
        </p>
        <p className="text-sm text-gray-500">{highlight(user.email, query)}</p>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gray-100 p-6 font-sans">
      <div className="max-w-3xl mx-auto bg-white p-6 rounded-2xl border-2 border-pink-200 shadow-md">
        <h1 className="text-2xl font-bold text-pink-600 mb-4">
          👩‍💻 Massive Search Filter (Virtualized)
        </h1>

        <input
          type="text"
          value={query}
          onChange={handleSearch}
          placeholder="Search name or email..."
          className="w-full p-3 mb-4 border-2 border-pink-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400"
        />

        {isPending && (
          <div className="text-pink-500 italic mb-2 text-sm animate-pulse">
            🔄 Filtering...
          </div>
        )}

        {filteredUsers.length === 0 ? (
          <div className="p-4 text-gray-500 italic text-center">No users found.</div>
        ) : (
          <List
            height={500}
            itemCount={filteredUsers.length}
            itemSize={70}
            width="100%"
            className="border-t border-pink-100"
          >
            {Row}
          </List>
        )}
      </div>
    </div>
  );
}

Conclusion

By applying virtualization, memoization, and UI prioritization strategies, we were able to significantly improve the performance of our search filter component. The user interaction is now smooth and responsive, even with thousands of items to filter through.

This experience highlights the importance of optimizing for performance when dealing with large datasets or complex user interactions. React’s built-in hooks like useMemo, useTransition, and third-party libraries like react-window can make a huge difference in how performant and smooth your application feels to users.

Code reference: https://github.com/paghar/react19-next15-trickysample

Remove Duplicates Ways from an Array in Javascript

Fatemeh Paghar — Thu, 11 Apr 2024 13:55:32 +0000

Duplicate elements can be a nuisance when working with arrays in JavaScript. They not only clutter your data but can also affect the performance of your code. Fortunately, JavaScript offers several efficient methods to remove duplicates from arrays, each with its own advantages and use cases. In this article, we'll delve into six distinct approaches to remove duplicates from arrays, ranging from utilizing built-in methods like Set to more custom solutions for arrays of objects.

1-Using a Set

JavaScript Sets are collections of unique values, making them a natural choice for removing duplicates from arrays. By converting an array to a Set, all duplicate values are automatically discarded.

const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6];
const uniqueArray = [...new Set(arrayWithDuplicates)];
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6]

2-Using indexOf() and filter() methods

The combination of indexOf() and filter() methods offers a straightforward approach to removing duplicates by filtering out elements based on their first occurrence in the array.

const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6];
const uniqueArray = arrayWithDuplicates.filter(
   (value, index, array) => array.indexOf(value) === index
);
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6]

3-Using Reduce

The reduce method allows for concise code to remove duplicates while preserving the order of elements in the original array.

const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6];
const uniqueArray = arrayWithDuplicates.reduce(
(accumulator, currentValue) => {
    if (!accumulator.includes(currentValue)) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6]

4-Using forEach() and include()

Using forEach() along with includes() method, you can efficiently iterate over the array and check if an element is already present in the result array, thus removing duplicates.

const arrayWithDuplicates = [1, 2, 3, 4, 4, 5, 6, 6];
const uniqueArray = [];
arrayWithDuplicates.forEach((value) => {
    if (!uniqueArray.includes(value)) {
        uniqueArray.push(value);
    }
});
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5, 6]

5-Remove duplicates from an array of objects by one property

When dealing with arrays of objects, you might want to remove duplicates based on a specific property. Here's how you can achieve that using the filter() method and a temporary object to track unique values.

const arrayOfObjectsWithDuplicates = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 1, name: 'John' }
];
const uniqueArray = arrayOfObjectsWithDuplicates.filter(
   (obj, index, self) =>
      index === self.findIndex((t) => t.id === obj.id)
   );
console.log(uniqueArray); 
// Output: [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
]

6-Remove duplicates from an array of objects by multiple properties

In scenarios where you need to consider multiple properties for removing duplicates from arrays of objects, you can create a composite key and utilize a similar approach as above.

const arrayOfObjectsWithDuplicates = [
    { id: 1, name: 'John', age: 30 },
    { id: 2, name: 'Jane', age: 25 },
    { id: 1, name: 'John', age: 30 }
];

const uniqueArray = arrayOfObjectsWithDuplicates.filter(
  (obj, index, self) =>
    index === self.findIndex(
       (t) => t.id === obj.id && 
              t.name === obj.name && 
              t.age === obj.age
        )
  );
console.log(uniqueArray); 
// Output: [
  { id: 1, name: 'John', age: 30 }, 
  { id: 2, name: 'Jane', age: 25 }
]

Conclusion

With these diverse techniques at your disposal, you can confidently tackle the task of removing duplicates from arrays in JavaScript. Whether you're working with simple arrays or complex arrays of objects, there's a suitable method to streamline your data and optimize your code's performance. Choose the approach that best fits your requirements and elevate your JavaScript programming skills to the next level.

References:

Remove duplicate values from JS array

Object Iteration ways in JavaScript

Fatemeh Paghar — Mon, 08 Apr 2024 11:50:36 +0000

JavaScript, being a versatile language, offers several ways to iterate over objects. In this article, we'll explore various techniques for iterating over objects, providing examples to deepen your understanding.

1-for...in Loop:

The for...in loop is the most traditional way to iterate over the properties of an object. It iterates over all enumerable properties, including those inherited through the prototype chain. However, caution is required when using it with objects that may have properties added to their prototypes.

const obj = { a: 1, b: 2, c: 3 };
for (let prop in obj) {
    console.log(prop + ': ' + obj[prop]);
}

Avoid iterating over inherited properties by using the hasOwnProperty() method.

for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        console.log(prop + ': ' + obj[prop]);
    }
}

2-Object.keys():

The Object.keys() method returns an array of a given object's enumerable property names. It's a convenient way to iterate over object properties when you're only interested in keys.

const obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach(key => {
    console.log(key + ': ' + obj[key]);
});

Remember that Object.keys() ignores inherited properties.

3-Object.entries():

Object.entries() returns an array of a given object's own enumerable string-keyed property [key, value] pairs. This method allows you to iterate over both keys and values simultaneously.

const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj).forEach(([key, value]) => {
    console.log(key + ': ' + value);
});

Keep in mind that this method doesn't work with symbols as keys.

4-Object.values()

The Object.values() method takes an object as its parameter and returns an array containing the property values of that object. It ignores properties inherited through the prototype chain and includes only the object's own enumerable properties.

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // Output: [1, 2, 3]

In this example, Object.values(obj) returns an array [1, 2, 3] containing the values of the properties a, b, and c.

Iterating Over Values:
Once you have the array of values, you can iterate over it using any array iteration method like forEach, map, for...of, etc.

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
values.forEach(value => {
    console.log(value);
});

This code snippet logs each value (1, 2, 3) to the console.

It's important to note that Object.values() only returns the values of properties with string keys. Properties with non-string keys, such as symbols, are ignored.

const obj = { a: 1, [Symbol('b')]: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // Output: [1, 3]

In this example, the property with the symbol key Symbol('b') is ignored, and only the values of properties a and c are returned.

5-Object.getOwnPropertyNames()

Object.getOwnPropertyNames() is a method in JavaScript used to iterate over the properties of an object. Unlike methods like Object.keys() or for...in loops, which only iterate over enumerable properties, Object.getOwnPropertyNames() returns an array of all property names found directly on the given object, regardless of their enumerability.

Here's how you can use Object.getOwnPropertyNames() to iterate over an object:

const obj = {
    a: 1,
    b: 2,
    c: 3
};

const properties = Object.getOwnPropertyNames(obj);

properties.forEach(property => {
    console.log(property + ': ' + obj[property]);
});

One important aspect to note is that Object.getOwnPropertyNames() includes both enumerable and non-enumerable properties of the object. Enumerable properties are those that can be iterated over using methods like for...in or Object.keys(), while non-enumerable properties cannot be iterated over by default.

Consider the following example:

const obj = {};
Object.defineProperty(obj, 'nonEnumProp', {
    value: 'Non-enumerable property',
    enumerable: false
});

const properties = Object.getOwnPropertyNames(obj);
console.log(properties); // Output: ["nonEnumProp"]

In this example, we define a property nonEnumProp on obj with the enumerable property set to false. Despite being non-enumerable, nonEnumProp is included in the array returned by Object.getOwnPropertyNames(). This behavior sets Object.getOwnPropertyNames() apart from methods like Object.keys(), which only return enumerable properties.

Conclusion

In this article, we've explored various effective methods for iterating through objects in JavaScript, each tailored to specific requirements. These methods provide flexibility and control over the iteration process, ensuring efficient navigation and manipulation of object properties. Whether using for...in loops for basic enumeration, Object.keys() for accessing keys, or custom iterators with Symbol.iterator for advanced control, JavaScript offers a diverse toolkit for object iteration. By understanding and leveraging these methods, developers can enhance code readability, maintainability, and performance, ultimately contributing to the creation of more robust and efficient applications.

References

React Component Design Patterns - Part 2

Fatemeh Paghar — Tue, 26 Mar 2024 19:29:39 +0000

5. State reducer pattern

The State Reducer Pattern in React is a design pattern used to manage state in a more controlled and predictable manner. It involves using a reducer function to handle state transitions and actions, similar to how reducers work in Redux. This pattern can be particularly useful for managing complex state logic or state that needs to be shared across multiple components.

Let's walk through an example of implementing the State Reducer Pattern in React for managing a a social media dashboard application.In this example, we'll manage the state of the user's posts and notifications using a reducer function.

import React, { useReducer } from 'react';

// Action types
const ADD_POST = 'ADD_POST';
const DELETE_POST = 'DELETE_POST';
const ADD_NOTIFICATION = 'ADD_NOTIFICATION';
const DELETE_NOTIFICATION = 'DELETE_NOTIFICATION';

// Reducer function
const dashboardReducer = (state, action) => {
  switch (action.type) {
    case ADD_POST:
      return { ...state, posts: [...state.posts, action.payload] };
    case DELETE_POST:
      return { ...state, posts: state.posts.filter(post => post.id !== action.payload.id) };
    case ADD_NOTIFICATION:
      return { ...state, notifications: [...state.notifications, action.payload] };
    case DELETE_NOTIFICATION:
      return { ...state, notifications: state.notifications.filter(notification => notification.id !== action.payload.id) };
    default:
      return state;
  }
};

// Dashboard component
const Dashboard = () => {
  // Initialize state using useReducer hook
  const [state, dispatch] = useReducer(dashboardReducer, { posts: [], notifications: [] });

  // Add post function
  const addPost = (text) => {
    const newPost = { id: Date.now(), text };
    dispatch({ type: ADD_POST, payload: newPost });
  };

  // Delete post function
  const deletePost = (id) => {
    dispatch({ type: DELETE_POST, payload: { id } });
  };

  // Add notification function
  const addNotification = (text) => {
    const newNotification = { id: Date.now(), text };
    dispatch({ type: ADD_NOTIFICATION, payload: newNotification });
  };

  // Delete notification function
  const deleteNotification = (id) => {
    dispatch({ type: DELETE_NOTIFICATION, payload: { id } });
  };

  return (
    <div>
      <h1>Social Media Dashboard</h1>
      <div>
        <h2>Posts</h2>
        <ul>
          {state.posts.map(post => (
            <li key={post.id}>
              {post.text}
              <button onClick={() => deletePost(post.id)}>Delete</button>
            </li>
          ))}
        </ul>
        <button onClick={() => addPost('New post')}>Add Post</button>
      </div>
      <div>
        <h2>Notifications</h2>
        <ul>
          {state.notifications.map(notification => (
            <li key={notification.id}>
              {notification.text}
              <button onClick={() => deleteNotification(notification.id)}>Dismiss</button>
            </li>
          ))}
        </ul>
        <button onClick={() => addNotification('New notification')}>Add Notification</button>
      </div>
    </div>
  );
};

export default Dashboard;

In this example:

We define action types (ADD_POST, DELETE_POST, ADD_NOTIFICATION, DELETE_NOTIFICATION) that represent different actions that can be performed on the social media dashboard state.
We define a reducer function (dashboardReducer) that takes the current state and an action and returns the new state based on the action.
We use the useReducer hook to create a stateful value (state) and a dispatch function to update the state by passing actions to the reducer.
The Dashboard component contains logic for adding and deleting posts and notifications. It dispatches actions to the reducer to update the state accordingly.
In the UI, posts, and notifications are rendered as list items with buttons to delete them.
Users can add new posts or notifications by clicking on the respective buttons.

This example demonstrates how to implement the State Reducer Pattern in React to manage the state of a social media dashboard, including posts and notifications. The reducer function centralizes state management logic, making it easier to understand and maintain.

6- Component Composition pattern

Component Composition pattern involves composing smaller, reusable components together to create more complex components or UIs. Let's illustrate this pattern with a social media dashboard example.

Suppose we have a social media dashboard that consists of several components such as UserInfo, Feed, Notifications, and Sidebar. We can compose these smaller components together to create the social media dashboard component.

import React from 'react';

// UserInfo component
const UserInfo = ({ user }) => {
  return (
    <div className="user-info">
      <img src={user.profilePic} alt="Profile" />
      <h3>{user.name}</h3>
    </div>
  );
};

// Feed component
const Feed = ({ posts }) => {
  return (
    <div className="feed">
      <h2>Feed</h2>
      <ul>
        {posts.map((post, index) => (
          <li key={index}>
            <h4>{post.title}</h4>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

// Notifications component
const Notifications = ({ notifications }) => {
  return (
    <div className="notifications">
      <h2>Notifications</h2>
      <ul>
        {notifications.map((notification, index) => (
          <li key={index}>
            <p>{notification}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

// Sidebar component
const Sidebar = () => {
  return (
    <div className="sidebar">
      <ul>
        <li>Home</li>
        <li>Profile</li>
        <li>Messages</li>
        <li>Settings</li>
      </ul>
    </div>
  );
};

// SocialMediaDashboard component composed of smaller components
const SocialMediaDashboard = ({ user, posts, notifications }) => {
  return (
    <div className="social-media-dashboard">
      <UserInfo user={user} />
      <div className="main-content">
        <Feed posts={posts} />
        <Notifications notifications={notifications} />
      </div>
      <Sidebar />
    </div>
  );
};

// Main component
const App = () => {
  // Sample data
  const user = {
    name: "John Doe",
    profilePic: "https://via.placeholder.com/150",
  };

  const posts = [
    { title: "Post 1", content: "Content of post 1" },
    { title: "Post 2", content: "Content of post 2" },
    { title: "Post 3", content: "Content of post 3" },
  ];

  const notifications = [
    "You have a new friend request",
    "Your post has been liked",
    "You have a new message",
  ];

  return (
    <div>
      <h1>Social Media Dashboard</h1>
      <SocialMediaDashboard user={user} posts={posts} notifications={notifications} />
    </div>
  );
};

export default App;

In this example:

We have separate components for UserInfo, Feed, Notifications, and Sidebar, each responsible for rendering a specific part of the social media dashboard.
We compose these smaller components together in the SocialMediaDashboard component to create the entire social media dashboard UI.
The App component serves as the entry point where we pass sample data (user information, posts, notifications) to the SocialMediaDashboard component.

This demonstrates how we can use the Component Composition pattern to build a social media dashboard by composing smaller, reusable components together. Each component focuses on a specific aspect of the UI, promoting reusability and maintainability.

References:

React-18-Design-Patterns-and-Best-Practices-Fourth-Edition

React Component Design Patterns - Part 1

Fatemeh Paghar — Tue, 26 Mar 2024 19:29:29 +0000

React design patterns are established practices and solutions that developers utilize to address common problems and challenges encountered when building applications with React. These patterns encapsulate reusable solutions to recurring design problems, promoting maintainability, scalability, and efficiency. They provide a structured approach to organizing components, managing state, handling data flow, and optimizing performance.

Consider the following as the top 6 React design patterns:

Container and presentation pattern
The HOC(Higher Order Component)Pattern
Compound Components Pattern
Provider Pattern(Data management with Providers)
State reducer pattern
Component Composition pattern

1. Container and presentation pattern

In this pattern, Container Components are responsible for managing data and state logic. They fetch data from external sources, manipulate it if necessary, and pass it down to Presentational Components as props. They are often connected to external services, Redux stores, or context providers.

On the other hand, Presentational Components are focused solely on the presentation of UI elements. They receive data from Container Components via props and render it in a visually appealing way. Presentational Components are typically stateless functional components or pure components, making them easier to test and reuse.

Let's consider a complex example to illustrate these patterns:

Suppose we're building a social media dashboard where users can view their friends' posts and interact with them. Here's how we could structure our components:

Container Component (FriendFeedContainer):
This component would be responsible for fetching data about friends' posts from an API, handling any necessary data transformations, and managing the state of the feed. It would pass the relevant data down to the Presentational Components.

import React, { useState, useEffect } from 'react';
import FriendFeed from './FriendFeed';

const FriendFeedContainer = () => {
  const [friendPosts, setFriendPosts] = useState([]);

  useEffect(() => {
    // Fetch friend posts from API
    const fetchFriendPosts = async () => {
      const posts = await fetch('https://api.example.com/friend-posts');
      const data = await posts.json();
      setFriendPosts(data);
    };
    fetchFriendPosts();
  }, []);

  return <FriendFeed posts={friendPosts} />;
};

export default FriendFeedContainer;

Presentational Component (FriendFeed):
This component would receive the friend posts data from its parent Container Component (FriendFeedContainer) as props and render them in a visually appealing way.

import React from 'react';

const FriendFeed = ({ posts }) => {
  return (
    <div>
      <h2>Friend Feed</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <p>{post.content}</p>
            <p>Posted by: {post.author}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FriendFeed;

By structuring our components this way, we keep the concerns of fetching data and managing the state separate from the UI rendering logic. This separation allows for easier testing, reuse, and maintenance of our React application as it scales.

2.The HOC(Higher Order Component)Pattern

Higher-order components (HOCs) are a pattern in React that allows you to reuse component logic across multiple components. They are functions that take a component and return a new component with additional functionality.

To demonstrate the use of HOCs in a social media dashboard sample with React hooks, let's consider a scenario where you have multiple components that need to fetch user data from an API. Instead of duplicating the fetching logic in each component, you can create an HOC to handle the data fetching and pass the fetched data as props to the wrapped components.

Here's a basic example:

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

// Define a higher-order component for fetching user data
const withUserData = (WrappedComponent) => {
  return (props) => {
    const [userData, setUserData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      // Simulate fetching user data from an API
      const fetchData = async () => {
        try {
          const response = await fetch('https://api.example.com/user');
          const data = await response.json();
          setUserData(data);
          setLoading(false);
        } catch (error) {
          console.error('Error fetching user data:', error);
          setLoading(false);
        }
      };

      fetchData();
    }, []);

    return (
      <div>
        {loading ? (
          <p>Loading...</p>
        ) : (
          <WrappedComponent {...props} userData={userData} />
        )}
      </div>
    );
  };
};

// Create a component to display user data
const UserProfile = ({ userData }) => {
  return (
    <div>
      <h2>User Profile</h2>
      {userData && (
        <div>
          <p>Name: {userData.name}</p>
          <p>Email: {userData.email}</p>
          {/* Additional user data fields */}
        </div>
      )}
    </div>
  );
};

// Wrap the UserProfile component with the withUserData HOC
const UserProfileWithUserData = withUserData(UserProfile);

// Main component where you can render the wrapped component
const SocialMediaDashboard = () => {
  return (
    <div>
      <h1>Social Media Dashboard</h1>
      <UserProfileWithUserData />
    </div>
  );
};

export default SocialMediaDashboard;

In this example:

withUserData is a higher-order component that handles the fetching of user data from an API. It wraps the passed component (WrappedComponent) and provides the fetched user data as a prop (userData) to it.
UserProfile is a functional component that receives the userData prop and displays the user profile information.
UserProfileWithUserData is the component returned by wrapping UserProfile with withUserData.
SocialMediaDashboard is the main component where you can render UserProfileWithUserData or any other component that needs user data.

Using this pattern, you can easily reuse the data fetching logic across multiple components in your social media dashboard application without duplicating code.

3. Compound Components Pattern

The Compound Components pattern in React is a design pattern that allows you to create components that work together to form a cohesive UI, while still maintaining a clear separation of concerns and providing flexibility to customize the components' behavior and appearance.

In this pattern, a parent component acts as a container for one or more child components, known as "compound components." These child components work together to achieve a particular functionality or behavior. The key characteristic of compound components is that they share state and functionality with each other through their parent component.

Here's a simple example of implementing the Compound Components pattern in React using hooks:

import React, { useState } from 'react';

// Parent component that holds the compound components
const Toggle = ({ children }) => {
  const [isOn, setIsOn] = useState(false);

  // Function to toggle the state
  const toggle = () => {
    setIsOn((prevIsOn) => !prevIsOn);
  };

  // Clone the children and pass the toggle function and state to them
  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { isOn, toggle });
    }
    return child;
  });

  return <div>{childrenWithProps}</div>;
};

// Child component for the toggle button
const ToggleButton = ({ isOn, toggle }) => {
  return (
    <button onClick={toggle}>
      {isOn ? 'Turn Off' : 'Turn On'}
    </button>
  );
};

// Child component for the toggle status
const ToggleStatus = ({ isOn }) => {
  return <p>The toggle is {isOn ? 'on' : 'off'}.</p>;
};

// Main component where you use the compound components
const App = () => {
  return (
    <Toggle>
      <ToggleStatus />
      <ToggleButton />
    </Toggle>
  );
};

export default App;

In this example:

Toggle is the parent component that holds the compound components (ToggleButton and ToggleStatus).
ToggleButton is a child component responsible for rendering the toggle button.
ToggleStatus is another child component responsible for displaying the status of the toggle.
The Toggle component manages the state (isOn) and provides a toggle function to control the state. It clones its children and passes the isOn state and toggle function as props to them.

By using the Compound Components pattern, you can create reusable and composable components that encapsulate complex UI logic while still allowing for customization and flexibility.

4. Provider Pattern(Data management with Providers)

The Provider Pattern in React is a design pattern used for managing and sharing application state or data across multiple components. It involves creating a provider component that encapsulates the state or data and provides it to its descendant components through React's context API.

Let's walk through an example to illustrate the Provider Pattern in React for managing user authentication data:

// UserContext.js
import React, { createContext, useState } from 'react';

// Create a context for user data
const UserContext = createContext();

// Provider component
export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  // Function to login user
  const login = (userData) => {
    setUser(userData);
  };

  // Function to logout user
  const logout = () => {
    setUser(null);
  };

  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
};

export default UserContext;

In this example:

We create a context called UserContext using React's createContext function. This context will be used to share user data and authentication-related functions across components.
We define a UserProvider component that serves as the provider for the UserContext. This component manages the user state using the useState hook and provides methods like login and logout to update the user state.
Inside the UserProvider, we wrap the children with UserContext.Provider and pass the user state and the login and logout functions as the provider's value.
Now, any component that needs access to user data or authentication-related functions can consume the UserContext using the useContext hook.

Let's create a component that consumes the user data from the context:

// UserProfile.js
import React, { useContext } from 'react';
import UserContext from './UserContext';

const UserProfile = () => {
  const { user, logout } = useContext(UserContext);

  return (
    <div>
      {user ? (
        <div>
          <h2>Welcome, {user.username}!</h2>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <div>
          <h2>Please log in</h2>
        </div>
      )}
    </div>
  );
};

export default UserProfile;

In this component:

We import UserContext and use the useContext hook to access the user data and the logout function provided by the UserProvider.
Depending on whether the user is logged in or not, we render different UI elements.

Finally, we wrap our application with the UserProvider to make the user data and authentication-related functions available to all components:

// App.js
import React from 'react';
import { UserProvider } from './UserContext';
import UserProfile from './UserProfile';

const App = () => {
  return (
    <UserProvider>
      <div>
        <h1>My App</h1>
        <UserProfile />
      </div>
    </UserProvider>
  );
};

export default App;

In this way, the Provider Pattern allows us to manage and share application state or data across multiple components without the need for prop drilling, making our code cleaner and more maintainable.

Manipulate Complex API Data Sample In React

Fatemeh Paghar — Mon, 25 Mar 2024 07:40:31 +0000

The TimeLine repository serves as a demonstration of manipulating complex API data in a React application. It showcases the process of fetching data from an API and transforming it into a format suitable for presentation on a timeline interface.

TimeLine Repository

Complex Data Handling

In the Data component, you can see transformStructure function that illustrates techniques for handling complex data structures and how to transfer complex data to UI data format.

Sort an Array of Objects Ways in JavaScript

Fatemeh Paghar — Sun, 24 Mar 2024 08:02:10 +0000

Sorting arrays of objects in JavaScript is a fundamental task for developers working with complex data structures. Whether you're dealing with numeric values, strings, or dates, JavaScript provides powerful tools to efficiently organize your data. In this guide, we'll explore various methods to sort arrays of objects based on different criteria.

Sorting an Array of Objects by Numbers

When sorting an array of objects by numeric values, you can utilize the sort() method along with a custom comparison function. This function compares two objects based on a specific numeric property.

// Sample array of objects with numeric values
const numericObjects = [
    { id: 3, value: 20 },
    { id: 1, value: 10 },
    { id: 2, value: 30 }
];

// Sort the array based on the 'value' property
numericObjects.sort((a, b) => a.value - b.value);

console.log(numericObjects);

In this example, the sort() method arranges the objects in ascending order based on the value property.

Sorting an Array of Objects by Strings

Sorting an array of objects by string values follows a similar approach. You can use the sort() method with a custom comparison function to sort objects based on a specific string property.

// Sample array of objects with string values
const stringObjects = [
    { id: 3, name: 'Charlie' },
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
];

// Sort the array based on the 'name' property
stringObjects.sort((a, b) => a.name.localeCompare(b.name));

console.log(stringObjects);

In this example, localeCompare() is used within the comparison function to ensure proper sorting of strings in different languages.

Sorting an Array of Objects by Dates

Sorting an array of objects by dates requires special handling due to the nature of date objects. You can still utilize the sort() method with a custom comparison function tailored for dates.

// Sample array of objects with date values
const dateObjects = [
    { id: 3, date: 'December 15, 2017'},
    { id: 1, date: 'January 15, 2019'},
    { id: 2, date: 'February 15, 2011'}
];

// Sort the array based on the 'date' property
dateObjects.sort((a, b) => {
    let da = new Date(a.date),
        db = new Date(b.date);
    return da - db;
});

console.log(dateObjects);

In this example, the sort() method compares dates directly by subtracting one from the other, which works because dates are inherently comparable in JavaScript.

Using a custom, dynamic sort function

Sort an array of objects alphabetically based on a property

const alphabetical = (arr, getter, order = 'asc') =>
  arr.sort(
    order === 'desc'
      ? (a, b) => getter(b).localeCompare(getter(a))
      : (a, b) => getter(a).localeCompare(getter(b))
  );

const people = [ { name: 'John' }, { name: 'Alice' }, { name: 'Bob' } ];
alphabetical(people, g => g.name);
// [ { name: 'Alice' }, { name: 'John' }, { name: 'Bob' } ]
alphabetical(people, g => g.name, 'desc');
// [ { name: 'Bob' }, { name: 'John' }, { name: 'Alice' } ]

Utilizing the Array.prototype.sort() method, we can efficiently organize the array according to the designated property. Employing String.prototype.localeCompare() enables us to compare values associated with the specified property. Optionally, the order parameter, which defaults to 'asc', allows us to control the sorting direction.

This function alphabetical accepts an array arr, a getter function to extract the property for comparison, and an optional order parameter to specify the sorting direction. By default, it sorts in ascending order ('asc'), but it can be overridden to sort in descending order ('desc').

Sorting an array of objects based on specified properties and orders

function dynamicSort(array, sortBy) {
    return array.sort((a, b) => {
        return sortBy.reduce((result, current) => {
            if (result !== 0) return result;

            const { property, order = 'asc' } = current;

            let comparison = 0;
            if (a[property] > b[property]) {
                comparison = 1;
            } else if (a[property] < b[property]) {
                comparison = -1;
            }

            if (order === 'desc') {
                comparison *= -1;
            }

            return comparison;
        }, 0);
    });
}

// Example usage:
const data = [
    { name: 'John', age: 30 },
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 35 }
];

const sortedData = dynamicSort(data, [
    { property: 'age', order: 'asc' },
    { property: 'name', order: 'desc' }
]);

console.log(sortedData);
//
[
  { name: 'Alice', age: 25 },
  { name: 'John', age: 30 },
  { name: 'Bob', age: 35 }
]

Here's how it works:
Parameters: The function takes two parameters:

array: This is the array of objects that you want to sort.
sortBy: This is an array of objects, each specifying a property to sort by and its corresponding sort order. If the sort order is not provided, it defaults to ascending ('asc').

Sorting Mechanism: The array.sort() method is used to perform the sorting. Within the sorting callback function, the sortBy array is iterated over using the Array.reduce() method.

Comparison: For each property specified in sortBy, a comparison function is applied. This function compares the corresponding property values of two objects (a and b) being compared.

Sorting Order: The order property of each sortBy item determines whether the sorting should be in ascending ('asc') or descending ('desc') order. If the order is 'desc', the comparison result is negated to reverse the sorting order.

Final Sorting Result: The sorting process continues until a non-zero comparison result is found, which determines the final order of the objects in the sorted array.

Conclusion

Sorting arrays of objects in JavaScript is a common task that can be accomplished using the sort() method along with custom comparison functions. By understanding how to sort arrays based on numeric values, strings, and dates, you can effectively manage complex data structures in your JavaScript applications. Experiment with these techniques to efficiently organize your data according to your specific requirements.

References:

Meme Generator Sample With React

Fatemeh Paghar — Fri, 22 Mar 2024 15:42:33 +0000

The Memo repository is a Meme Generator sample built with React, designed to enable users to generate PNG or JPG images from custom HTML content. This content can include images and text, with the option to position two headings absolutely on the image. The top heading appears at the top of the image, while the bottom heading is positioned at the bottom.

Memo Timeline Repository

Users can utilize the Memo repository to:

Allows users to create custom memes by overlaying text on an image.
Users can input any HTML content they desire, including images and text.
Supports absolute positioning of two headings on the image, one at the top and one at the bottom.
Users can add images from their local disk using a file input.
Provides the ability to download the generated meme in PNG or JPG format.

Sample Search Page with React, Next.js, Tailwind, and Libraries.io API

Fatemeh Paghar — Fri, 22 Mar 2024 10:53:18 +0000

This sample search page is a demonstration of modern web development techniques utilizing popular technologies such as React, Next.js, Tailwind CSS, and the Libraries.io API. Designed with simplicity and efficiency in mind, this project showcases how to build a responsive and user-friendly search interface for discovering software libraries.

GitHub Repository : Search-Libraries

Key Features:

React and Next.js: The project harnesses the power of React, a widely-used JavaScript library for building user interfaces, along with Next.js, a framework for React applications.

Tailwind CSS: The UI is styled using Tailwind CSS, a utility-first CSS framework that allows for rapid development by providing a set of pre-designed, customizable components and utilities.

Libraries.io API Integration: The search functionality is powered by the Libraries.io API, which provides comprehensive metadata about software libraries from various package managers. Users can search for libraries based on keywords or specific criteria and receive relevant results.

Responsive Design: The search page is designed to be fully responsive, ensuring a seamless experience across devices of all sizes, including desktops, tablets, and smartphones.

Dynamic Search Results: As users type their search queries, the page dynamically updates the displayed results, offering real-time feedback and enhancing the overall user experience.

Pagination: To manage large sets of search results, pagination is implemented, allowing users to navigate through multiple pages of results efficiently.

Error Handling: The application includes robust error handling to gracefully manage scenarios such as failed API requests or unexpected errors, ensuring a smooth user experience even in adverse conditions.

Clean and Modular Code: The codebase follows best practices for React and Next.js development, emphasizing modularity, readability, and maintainability. Components are organized logically, making it easy to extend or modify the application as needed.

React Context and Reducer: To manage the application state efficiently, React context and a reducer are employed. Context provides a way to share states across components without prop drilling, while the reducer handles state transitions based on dispatched actions, promoting predictable and scalable state management.

Unit Testing with React Testing Library and Jest: The project includes unit tests written with React Testing Library and Jest, ensuring that components and functions behave as expected under different scenarios. Test coverage encompasses critical functionalities such as search, pagination, and error handling.

Overall, this sample search page serves as a testament to the power and flexibility of modern web development technologies, showcasing how to create intuitive and feature-rich user interfaces while leveraging the capabilities of popular libraries and APIs. Whether as a learning resource or a foundation for building production-ready applications, this project exemplifies the art of crafting elegant web experiences.

JavaScript Template Literals

Fatemeh Paghar — Thu, 21 Mar 2024 08:03:26 +0000

Template literals, introduced in ECMAScript 6 (ES6), are a way to work with strings more efficiently and expressively in JavaScript.

Syntax: Template literals are enclosed in backticks. For example:

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, John!

Expression Interpolation: You can embed expressions within template literals using ${}:

const a = 5;
const b = 10;
const sum = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(sum); // Output: The sum of 5 and 10 is 15.

Function Interpolation: You can also embed function calls within template literals:

function capitalize(str) {
    return str.toUpperCase();
}
const text = `This is ${capitalize('important')}.`;
console.log(text); // Output: This is IMPORTANT.

Nested Templates: You can nest template literals within each other:

const firstName = 'John';
const lastName = 'Doe';

function fullName(fName, lName) {
  return fName + " " + lName;
}

console.log(`FirstName = ${firstName} and lastname = ${lastName} and fullname = ${fullName(`${firstName}`,`${lastName}`)}`)

Tagged Templates: Template literals can be tagged with a function, which allows you to modify the output using the tagged function. This is an advanced feature that enables powerful string manipulation and templating:

function tag(strings, ...values) {
    return strings.reduce((result, str, i) => {
        result += str;
        if (i < values.length) {
            result += values[i];
        }
        return result;
    }, '');
}
const a = 10;
const b = 5;
const result = tag`The result of ${a} + ${b} is ${a + b}.`;
console.log(result); // Output: The result of 10 + 5 is 15.

Escape Sequences: Template literals still support escape sequences like \n, \t, etc., just like regular strings:

const escaped = `This is a string\nwith a new line`;
console.log(escaped);

These points demonstrate the flexibility and power of template literals in JavaScript, making string manipulation and interpolation more intuitive and expressive.

In conclusion, template literals in JavaScript provide a versatile and expressive way to work with strings. With their ability to embed variables, expressions, and even nested templates directly within strings, they offer a more readable and concise syntax compared to traditional string concatenation methods. Additionally, tagged template literals introduce advanced capabilities by allowing custom processing of string segments and interpolated values. Whether it's simple string interpolation or complex string manipulation tasks like syntax highlighting or internationalization, template literals offer a powerful tool for developers to create dynamic and flexible string content in their JavaScript applications.

References:
Template literals (Template strings)

Dynamic Community Landing Page with Next.js, React, Tailwind, and Strapi - Download Free

Fatemeh Paghar — Tue, 19 Mar 2024 17:38:34 +0000

This repository hosts a dynamic community landing page built using modern web technologies including Next.js, React, Tailwind CSS, and Strapi. It is designed to be free to download, allowing developers to easily set up and customize their community landing pages.

Demo
Front-End Repository
Back-End Repository

Tech Stack

Front End: React, Next.js, Java Script, Type Script, Web-pack, Enlist
Layout:Tailwind CSS
Folder Structure: Base on Clean Architecture
Methodology and Architecture:
-HOC Pattern (Higher Order Component Pattern)
-Container and Presentational Components Pattern
-Provider Pattern
-Hooks Pattern
-State reducer pattern
Back End: Strapi

Copy Objects Ways in JavaScript

Fatemeh Paghar — Sat, 16 Mar 2024 12:59:40 +0000

To copy objects in JavaScript, you typically have three options: using the assignment operator (=) for reference copying, performing a shallow copy using methods like Object.assign() or the spread operator (...), and creating a deep copy using a combination of JSON.parse() and JSON.stringify().

1. Reference Copy (Assignment Operator =):

const originalObject = { key: 'value' };
const referenceCopy = originalObject;

In this method, referenceCopy now points to the same object as originalObject. Changes made to one will affect the other.This method creates a reference to the original object. Changes made to the original object will be reflected in the copied object, and vice versa. This is not a true copy; rather, both variables point to the same object.

2. Shallow Copy:

a. Using Object.assign():

const originalObject = { key: 'value' };
const shallowCopy = Object.assign({}, originalObject);

Object.assign() creates a shallow copy of the object. It copies the enumerable properties from one or more source objects to a target object. In the example above, an empty object {} serves as the target, and originalObject is the source. Note that nested objects are still referenced, so changes to nested objects in the original will affect the copied object.

b. Using Spread Operator (...):

const originalObject = { key: 'value' };
const shallowCopy = { ...originalObject };

The spread operator is a concise way to create shallow copies of objects. Like Object.assign(), it only creates a copy of the top-level properties. Nested objects are still referenced, so changes to nested objects in the original will affect the copied object.

Both of these methods create a shallow copy, copying only the top-level properties of the object. Changes to nested objects will be reflected in both the original and the copy.

3. Deep Copy:

Using JSON.parse() and JSON.stringify()

const originalObject = { key: 'value', nested: { key2: 'value2' } };

// Using JSON.parse() and JSON.stringify()
const deepCopy = JSON.parse(JSON.stringify(originalObject));

This method creates a deep copy of the object, including nested structures. Keep in mind that this approach has limitations, such as not preserving non-JSON-safe data and being less efficient for large or complex objects.

Select the suitable approach depending on your particular circumstances:

Reference Copy (=): Use when you want both variables to reference the same object.
Shallow Copy (Object.assign() or Spread Operator): Use when you need a copy of the top-level properties and are not concerned about nested objects being shared.
Deep Copy (JSON.parse() and JSON.stringify()): Use when you need a completely independent copy, including nested structures. Be cautious about limitations with non-JSON-safe data.

A glance at examples

// Shallow Copy Example
let product = {
    id: 1,
    name: 'Smartphone',
    price: 499.99,
    details: {
        brand: 'TechCo',
        model: 'SmartX1',
        specifications: {
            display: '6.2 inches',
            camera: '12 MP',
            storage: '64 GB'
        }
    }
};

// Shallow copy using the spread operator
let copiedProduct = { ...product };

copiedProduct.name = 'Smartwatch'; // Disconnected

// Changes in the nested object are connected
copiedProduct.details.model = 'WatchPro';
copiedProduct.details.specifications.display = '1.3 inches';

console.log("Shallow Copy - Copied Product:", copiedProduct);
console.log("Shallow Copy - Original Product:", product);

// Deep Copy Example
let productDeep = {
    id: 1,
    name: 'Smartphone',
    price: 499.99,
    details: {
        brand: 'TechCo',
        model: 'SmartX1',
        specifications: {
            display: '6.2 inches',
            camera: '12 MP',
            storage: '64 GB'
        }
    }
};

// Deep copy using JSON methods
let copiedProductDeep = JSON.parse(JSON.stringify(productDeep));

copiedProductDeep.name = 'Laptop'; // Disconnected

// Changes in the nested object are also disconnected
copiedProductDeep.details.model = 'LaptopPro';
copiedProductDeep.details.specifications.display = '15.6 inches';

console.log("Deep Copy - Copied Product:", copiedProductDeep);
console.log("Deep Copy - Original Product:", productDeep);

Forem: Fatemeh Paghar

useTransition in React: Building a High-Performance Search for 50K Record Case Study

Introduction

The Problem: User Interaction with Large Datasets

The Original Approach

Challenges Faced

The Optimization Process

Step 1: Use react-window for Virtualization

Step 2: Memoization of Filtered Results

Step 3: Implementing startTransition for Smooth UI Updates

The Optimized Component

Conclusion

Remove Duplicates Ways from an Array in Javascript

1-Using a Set

2-Using indexOf() and filter() methods

3-Using Reduce

4-Using forEach() and include()

5-Remove duplicates from an array of objects by one property

6-Remove duplicates from an array of objects by multiple properties

Conclusion

Object Iteration ways in JavaScript

1-for...in Loop:

2-Object.keys():

3-Object.entries():

4-Object.values()

5-Object.getOwnPropertyNames()

Conclusion

React Component Design Patterns - Part 2

5. State reducer pattern

6- Component Composition pattern

React Component Design Patterns - Part 1

1. Container and presentation pattern

2.The HOC(Higher Order Component)Pattern

3. Compound Components Pattern

4. Provider Pattern(Data management with Providers)

Manipulate Complex API Data Sample In React

Complex Data Handling

Sort an Array of Objects Ways in JavaScript

Sorting an Array of Objects by Numbers

Sorting an Array of Objects by Strings

Sorting an Array of Objects by Dates

Using a custom, dynamic sort function

Conclusion

Meme Generator Sample With React

Users can utilize the Memo repository to:

Sample Search Page with React, Next.js, Tailwind, and Libraries.io API

Key Features:

JavaScript Template Literals

Dynamic Community Landing Page with Next.js, React, Tailwind, and Strapi - Download Free

Tech Stack

Copy Objects Ways in JavaScript

1. Reference Copy (Assignment Operator =):

2. Shallow Copy:

3. Deep Copy:

A glance at examples

Reference:

Step 1: Use `react-window` for Virtualization

Step 3: Implementing `startTransition` for Smooth UI Updates