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

Good practice without useEffect:

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

typescript

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

Solution without useEffect:

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

typescript

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

Optimized approach with useMemo:

typescript

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

Solution without useEffect:

typescript

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

Solution without useEffect:

typescript

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.

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}

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}

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}

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}

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}

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}

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}

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}

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}

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