When to Avoid Using useEffect in React to Optimize Your Code

In React projects, we often use useEffect reflexively, but this approach can sometimes unnecessarily complicate your code. In this article, we'll look at cases where you don't need useEffect and how to optimize your code by avoiding its misuse.

Understanding the Role of useEffect

The useEffect hook is useful for managing side effects like subscriptions or operations that need to happen outside the main rendering flow. However, some common use cases can be simplified without useEffect.

1. Initializing State Without useEffect

You often want to initialize state based on props or initial values when mounting a component. Instead of using useEffect to set this state, you can do it directly with useState, which will make your code clearer and prevent unnecessary calls.

Bad practice with useEffect:

typescript
1import { useState, useEffect } from "react";
2
3interface GreetingProps {
4  name: string;
5}
6
7function Greeting({ name }: GreetingProps) {
8  const [greeting, setGreeting] = useState<string>("");
9
10  useEffect(() => {
11    setGreeting(`Hello, ${name}`);
12  }, [name]);
13
14  return <h1>{greeting}</h1>;
15}

Good practice without useEffect:

Here, we can simply initialize the greeting state using a function in useState:

typescript
1import { useState } from "react";
2
3interface GreetingProps {
4  name: string;
5}
6
7function Greeting({ name }: GreetingProps) {
8  const [greeting] = useState<string>(() => `Hello, ${name}`);
9
10  return <h1>{greeting}</h1>;
11}

This approach makes the code more concise and avoids adding a superfluous effect that could slow down your application.

2. Calculating Derived Values

If you need to calculate a value based on state or props, try using a derived variable or memo rather than useEffect.

Example with useEffect (to avoid):

typescript
1import { useState, useEffect } from "react";
2
3interface CartItem {
4  price: number;
5}
6
7interface CartProps {
8  items: CartItem[];
9}
10
11function Cart({ items }: CartProps) {
12  const [total, setTotal] = useState<number>(0);
13
14  useEffect(() => {
15    setTotal(items.reduce((sum, item) => sum + item.price, 0));
16  }, [items]);
17
18  return <p>Total: ${total}</p>;
19}

Solution without useEffect:

Here, the total value can be calculated directly during rendering, without depending on useEffect:

typescript
1interface CartItem {
2  price: number;
3}
4
5interface CartProps {
6  items: CartItem[];
7}
8
9function Cart({ items }: CartProps) {
10  const total = items.reduce((sum, item) => sum + item.price, 0);
11
12  return <p>Total: ${total}</p>;
13}

This method is not only cleaner but eliminates the need to manage additional state.

3. Using useMemo for Heavy Calculations

For expensive calculations or those dependent on multiple variables, use useMemo to avoid re-executing the logic on each render, without needing useEffect to manage state.

Example with useEffect:

typescript
1import { useState, useEffect } from "react";
2
3interface ExpensiveCalculationProps {
4  num: number;
5}
6
7function ExpensiveCalculation({ num }: ExpensiveCalculationProps) {
8  const [result, setResult] = useState<number>(0);
9
10  useEffect(() => {
11    const computation = heavyComputation(num);
12    setResult(computation);
13  }, [num]);
14
15  return <p>Result: {result}</p>;
16}
17
18function heavyComputation(num: number): number {
19  // Simulates an expensive calculation
20  return num * 2; // Simplified example
21}

Optimized approach with useMemo:

typescript
1import { useMemo } from "react";
2
3interface ExpensiveCalculationProps {
4  num: number;
5}
6
7function ExpensiveCalculation({ num }: ExpensiveCalculationProps) {
8  const result = useMemo(() => heavyComputation(num), [num]);
9
10  return <p>Result: {result}</p>;
11}
12
13function heavyComputation(num: number): number {
14  // Simulates an expensive calculation
15  return num * 2; // Simplified example
16}

Here, useMemo allows memorizing the result without having to manage an effect, making the component more predictable and performant.

4. Synchronizing Controlled Component Properties

For managing controlled inputs, you don't need to use useEffect to synchronize input values with parent component state. Simply use props and callback functions to manage this state efficiently.

Example with useEffect (unnecessary):

typescript
1import { useState, useEffect } from "react";
2
3interface TextInputProps {
4  value: string;
5  onChange: (value: string) => void;
6}
7
8function TextInput({ value, onChange }: TextInputProps) {
9  const [text, setText] = useState<string>(value);
10
11  useEffect(() => {
12    setText(value);
13  }, [value]);
14
15  return <input value={text} onChange={(e) => onChange(e.target.value)} />;
16}

Solution without useEffect:

typescript
1interface TextInputProps {
2  value: string;
3  onChange: (value: string) => void;
4}
5
6function TextInput({ value, onChange }: TextInputProps) {
7  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
8}

Directly using props simplifies the code and improves performance by reducing unnecessary state updates.

5. Manipulating DOM Directly in Render

If you want to apply styles or classes based on state, it's often unnecessary to use useEffect. React handles this type of synchronization well during rendering.

Example with useEffect:

typescript
1import { useState, useEffect } from "react";
2
3interface HighlightedTextProps {
4  isHighlighted: boolean;
5  text: string;
6}
7
8function HighlightedText({ isHighlighted, text }: HighlightedTextProps) {
9  const [className, setClassName] = useState<string>("");
10
11  useEffect(() => {
12    setClassName(isHighlighted ? "highlight" : "");
13  }, [isHighlighted]);
14
15  return <span className={className}>{text}</span>;
16}

Solution without useEffect:

typescript
1interface HighlightedTextProps {
2  isHighlighted: boolean;
3  text: string;
4}
5
6function HighlightedText({ isHighlighted, text }: HighlightedTextProps) {
7  return <span className={isHighlighted ? "highlight" : ""}>{text}</span>;
8}

Conclusion

Avoiding useEffect often allows you to simplify your code and improve your React application's performance. By reevaluating the reasons for using an effect, you can create clearer components and avoid errors related to poorly configured dependencies. The key is identifying cases where state, derived values, or useMemo are sufficient to meet your needs without side effects.