How to Prevent Unnecessary Renders in React

React's rendering process is powerful but can become inefficient when components re-render without meaningful changes.

Let's explore strategies to prevent these unnecessary renders.

Understanding the Problem

React components typically re-render in three scenarios:

  • If the state changes
  • If the props change
  • Parent component re-renders

The last scenario can lead to wasted renders when child components don't actually need updating:

Let's take a look at an example of this scenario:

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
      <ChildComponent /> {/* Re-renders on every click despite no prop changes */}
    </div>
  );
}

React.memo for Function Components

Wrap function components with React.memo() to skip renders when props haven't changed:

const ChildComponent = React.memo(function ChildComponent() {
  console.log("Child rendered!");
  return <div>I'm a memoized component</div>;
});

// Now ChildComponent only re-renders when its props change

shouldComponentUpdate for Class Components

For class components, implement shouldComponentUpdate():

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps) {
    // Only re-render if the item data changed
    return nextProps.item.id !== this.props.item.id || 
           nextProps.item.content !== this.props.item.content;
  }
  
  render() {
    return <div>{this.props.item.content}</div>;
  }
}

useMemo and useCallback Hooks

Prevent recreating objects and functions on each render:

function SearchComponent({ data }) {
  const [query, setQuery] = useState("");
  
  // Without useMemo, filteredData would be recalculated on every render
  const filteredData = useMemo(() => {
    return data.filter(item => item.name.includes(query));
  }, [data, query]); // Only recalculate when data or query changes
  
  // Prevent handleClick from being recreated on every render
  const handleClick = useCallback(() => {
    console.log("Button clicked!");
  }, []); // Empty dependency array means this function never changes
  
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <button onClick={handleClick}>Search</button>
      <DataList data={filteredData} />
    </div>
  );
}

By implementing these techniques, you'll significantly reduce unnecessary renders and improve your React application's performance!

0
68

Related

When working with URLs in C#, encoding is essential to ensure that special characters (like spaces, ?, &, and =) don’t break the URL structure. The recommended way to encode a string for a URL is by using Uri.EscapeDataString(), which converts unsafe characters into their percent-encoded equivalents.

string rawText = "hello world!";
string encodedText = Uri.EscapeDataString(rawText);

Console.WriteLine(encodedText); // Output: hello%20world%21

This method encodes spaces as %20, making it ideal for query parameters.

For ASP.NET applications, you can also use HttpUtility.UrlEncode() (from System.Web), which encodes spaces as +:

using System.Web;

string encodedText = HttpUtility.UrlEncode("hello world!");
Console.WriteLine(encodedText); // Output: hello+world%21

For .NET Core and later, Uri.EscapeDataString() is the preferred choice.

28
1211

Removing duplicates from a list in C# is a common task, especially when working with large datasets. C# provides multiple ways to achieve this efficiently, leveraging built-in collections and LINQ.

Using HashSet (Fastest for Unique Elements)

A HashSet<T> automatically removes duplicates since it only stores unique values. This is one of the fastest methods:

List<int> numbers = new List<int> { 1, 2, 2, 3, 4, 4, 5 };
numbers = new HashSet<int>(numbers).ToList();
Console.WriteLine(string.Join(", ", numbers)); // Output: 1, 2, 3, 4, 5

Using LINQ Distinct (Concise and Readable)

LINQ’s Distinct() method provides an elegant way to remove duplicates:

List<int> numbers = new List<int> { 1, 2, 2, 3, 4, 4, 5 };
numbers = numbers.Distinct().ToList();
Console.WriteLine(string.Join(", ", numbers)); // Output: 1, 2, 3, 4, 5

Removing Duplicates by Custom Property (For Complex Objects)

When working with objects, DistinctBy() from .NET 6+ simplifies duplicate removal based on a property:

using System.Linq;
using System.Collections.Generic;

class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

List<Person> people = new List<Person>
{
    new Person { Name = "Alice", Age = 30 },
    new Person { Name = "Bob", Age = 25 },
    new Person { Name = "Alice", Age = 30 }
};

people = people.DistinctBy(p => p.Name).ToList();
Console.WriteLine(string.Join(", ", people.Select(p => p.Name))); // Output: Alice, Bob

For earlier .NET versions, use GroupBy():

people = people.GroupBy(p => p.Name).Select(g => g.First()).ToList();

Performance Considerations

  • HashSet<T> is the fastest but only works for simple types.
  • Distinct() is easy to use but slower than HashSet<T> for large lists.
  • DistinctBy() (or GroupBy()) is useful for complex objects but may have performance trade-offs.

Conclusion

Choosing the best approach depends on the data type and use case. HashSet<T> is ideal for primitive types, Distinct() is simple and readable, and DistinctBy() (or GroupBy()) is effective for objects.

1
349

In C#, you can format an integer with commas (thousands separator) using ToString with a format specifier.

int number = 1234567;
string formattedNumber = number.ToString("N0"); // "1,234,567"
Console.WriteLine(formattedNumber);

Explanation:

"N0": The "N" format specifier stands for Number, and "0" means no decimal places. The output depends on the culture settings, so in regions where , is the decimal separator, you might get 1.234.567.

Alternative:

You can also specify culture explicitly if you need a specific format:

using System.Globalization;

int number = 1234567;
string formattedNumber = number.ToString("N0", CultureInfo.InvariantCulture);
Console.WriteLine(formattedNumber); // "1,234,567"
4
437