5 React Tricks to Improve Code Quality and Performance

React is a powerful JavaScript library for building user interfaces, and with just a few tricks, you can write cleaner, more efficient, and maintainable code. In this article, we'll explore five essential React tricks that will help you write more performant and readable code.

---

1. Use Ternary Operators Instead of AND (&&) Operators to Render Elements

In React, it’s common to conditionally render components or elements based on certain conditions. However, using the && operator for conditional rendering can be tricky when the evaluated expression results in a falsy value (e.g., false, null, undefined, 0, or ''). To avoid unintended rendering behavior, prefer using a ternary operator.

Example of && Behavior:

Using && in conditional rendering:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

• The first example ({0 && <h1>Hello world 5</h1>}) will render 0 in the UI because 0 is a falsy value in JavaScript, and React will interpret this as false. However, instead of rendering nothing, React will render the falsy value (0) itself.

• The second example ({0 ? <h1>Hello world 6</h1> : null}) will render nothing. Since the condition is 0 (which is falsy), the ternary operator will evaluate to null, and React will not render anything.

Better Approach with Ternary Operator:

Instead of relying on the && operator, you can use a ternary operator to ensure you render the correct fallback content, especially when the condition is falsy.

{0 ? <h1>Hello world 5</h1> : null}

In this case, if the condition is falsy (0), React will render null, which results in nothing being rendered, providing more predictable and intended behavior.

---

2. Lazy Initializer with useState

React’s useState hook can take a function as its initial value, allowing you to lazily initialize the state. This is particularly useful when the initial state is expensive to compute or when it depends on some computation that should only run once.

Why Use Lazy Initialization?

• Performance Improvement: If the initial state involves expensive computations or data fetching, lazy initialization helps to defer that cost until it is actually needed.
• Avoid Unnecessary Computations: The function you pass to useState as the initial value will only be executed once during the component mount, and it won’t be recomputed during subsequent renders.

Example:

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}</div>;
};

export default ExpensiveComponent;

In this example:

• useState(() => Math.random()) will call the function only once, on the initial render.
• This ensures that the random number generation only occurs once, improving performance if the computation was expensive.

---

3. Use Lazy Load Components to Improve Performance

React's React.lazy() and Suspense are great tools for lazy loading components, which helps split your JavaScript into smaller bundles and loads them only when needed. This significantly reduces the initial load time and improves the performance of your app.

Example:

import React, { Suspense } from 'react';

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

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

In this example:

• React.lazy() allows you to dynamically import LazyComponent.
• The Suspense component is used to display a loading state until the lazy-loaded component is fully rendered.

By using lazy loading, your app will only load the components necessary for the initial render and fetch others on-demand, enhancing performance, especially in large applications.

---

4. Using Optional Chaining in JavaScript

If you're working with JavaScript, optional chaining (?.) is a lifesaver when accessing deeply nested properties on objects. It prevents errors that occur when trying to access properties of undefined or null. Optional chaining is available in modern JavaScript and allows you to safely access properties without having to manually check for null or undefined.

Example:

function MyComponent({ data }) {
  const address = data?.info?.address ?? "Address not available";
  return <div>{address}</div>;
}

In this example:

• data?.info?.address safely accesses the address property without throwing an error if data or info is undefined or null.
• The ?? operator provides a default value if address is undefined.

Without optional chaining, you’d need to manually check each level, which can quickly lead to cluttered and harder-to-read code. Optional chaining keeps it clean and error-free.

---

5. Use useRef for Forms to Avoid Re-renders

In React, when working with forms and you don’t need the component to re-render on each input change, it's better to use useRef instead of useState. useRef stores the value of the input field directly and does not trigger a re-render when the value changes, making it more performant for large forms.

Example:

import React, { useRef } from 'react';

const MyForm: React.FC = () => {
  const nameRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    if (nameRef.current) {
      alert(`Name: ${nameRef.current.value}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

In this TypeScript example:

• useRef is used to keep track of the input value without causing the component to re-render on every input change.
• nameRef.current is used to directly access the input’s value when the form is submitted.

Using useRef is particularly useful when the form value does not need to trigger re-renders for validation or dynamic updates, making it an excellent choice for performance-sensitive forms.

---

Conclusion

By applying these five React tricks in your code, you can significantly improve performance, readability, and maintainability. Here’s a quick recap:

1. Use ternary operators for conditional rendering instead of &&.
2. Take advantage of lazy initialization in useState.
3. Implement lazy loading for components to improve initial load times.
4. Use optional chaining for safer property access in JavaScript.
5. Use useRef in forms to avoid unnecessary re-renders.

With these techniques, your React applications will be more efficient and easier to maintain, leading to better user experiences and smoother development. Happy coding!