1 Props Destructuring and Prop Types

Rather than using props and then using props.variableName, it is better to destructure the props to get the properties. It helps other developers to know which properties are available in the code. Destructuring props helps in writing cleaner and more readable code.

Bad Practice (Without Destructuring)

function MyComponent(props) {
  return <p>Count: {props.initialCount}</p>;
}

Best Practice (With Destructuring and PropTypes)

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';

function MyComponent({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Added dependency for better practice
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

MyComponent.propTypes = {
  initialCount: PropTypes.number.isRequired,
};

This example also includes a dependency array in useEffect to avoid unnecessary runs and warnings, which is a common pitfall in 2026 React development.

2 Optimizing Performance with useMemo and useCallback Hook

useMemo and useCallback are the two hooks that can help in optimizing the performance of the application in React. With the React Compiler in 2026, these hooks complement automatic memoization, but manual use is still key for complex computations.

import { useMemo } from 'react';

const MyComponent = ({ list }) => {
  const sortedList = useMemo(() => {
    return [...list].sort(); // Create a copy to avoid mutating original
  }, [list]);
  return (
    <div>
      {sortedList.map(item => <div key={item}>{item}</div>)}
    </div>
  );
};

useMemo

This is used to memorize an expensive (resource-heavy) computed value that doesn't need to be recalculated when re-rendering. It is recalculated only if any dependencies required to calculate the value change. This will save resources and improve the performance of the application.

useCallback

This hook is similar to useMemo but for callback functions. It memorizes the callback function and is useful when passing callbacks to optimized child components that rely on reference equality (same memory address rather than content) to prevent unnecessary renders.

Use Case of useCallback Hook:

import { useCallback } from 'react';

const MyComponent = ({ a, b }) => {
  const memoizedCallback = useCallback(() => {
    return a + b;
  }, [a, b]);
  return <ChildComponent onCalculate={memoizedCallback} />;
};

Pros: Reduces re-renders in child components. Cons: Overuse can lead to unnecessary complexity; rely on React Compiler where possible.

3 Custom Hook

Creating custom hooks in React can help in encapsulating and reusing logic across multiple components. They are specially designed to work within the React component lifecycle and have access to other React features like state and hooks. In 2026, custom hooks are essential for integrating with Server Components.

Here is an example that shows fetching data using an API. You can create a custom hook for fetching data to use across the application.

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

This also shows why you can prefer a custom hook over a regular function:

• State and Effect Management: You can use React logic and hooks like useState and useEffect for better state management and cleaner code.
• Sharing Logic: Custom hooks provide an elegant way to share logic between components without resorting to render props or higher-order components.
• Testing Ease: Hooks can be tested independently, improving code reliability.

4 Using Error Boundary and Suspense

Error Boundaries help in catching JavaScript errors in the component. Based on the error, they render a fallback UI instead of crashing the entire application. This improves the user experience. Suspense integrates well with concurrent features in React 2026.

Error Boundary Example

import React from 'react';

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Error caught by Error Boundary:", error, errorInfo);
    // You can log to a service like Sentry here
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong: {this.state.error.message}</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // Simulate an error
  throw new Error('Test error');
  return <div>MyComponent content</div>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
};

export default App;

Suspense Example

Suspense lets you "suspend" a component while waiting for an asynchronous operation. It can be used for fetching data or code splitting. It renders a fallback UI while waiting for content to load.

import React, { Suspense } from 'react';

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

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

Combining Error Boundaries and Suspense

<ErrorBoundary>
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

Pros: Enhances resilience. Cons: Error Boundaries don't catch errors in event handlers or async code; use try-catch for those.

5 Immutable Data Patterns

Immutable data patterns ensure that state is not modified directly. Instead, a new array or object is returned to represent the new state. This makes state changes predictable and easier to track. In 2026, this aligns with React's optimization strategies like shallow comparisons.

React's re-render optimization techniques, like PureComponent and React.memo, rely on shallow comparison to detect changes. Immutable states make these comparisons efficient.

Example: Updating State in Array and Object

import { useState } from 'react';

const MyComponent = () => {
  const [items, setItems] = useState([{ id: 1, name: "Item 1" }]);

  // Adding an item (without mutating the original state)
  const addItem = newItem => {
    setItems(prevItems => [...prevItems, newItem]);
  };

  // Removing an item (without mutating the original state)
  const removeItem = itemId => {
    setItems(prevItems => prevItems.filter(item => item.id !== itemId));
  };

  const [user, setUser] = useState({ name: "Alice", age: 30 });

  // Updating a property (without mutating the original state)
  const updateUser = newName => {
    setUser(prevUser => ({ ...prevUser, name: newName }));
  };

  // Removing a property (without mutating the original state)
  const removeProperty = propName => {
    setUser(prevUser => {
      const { [propName]: _, ...rest } = prevUser;
      return rest;
    });
  };

  return <!-- UI here -->;
};

Use the functional update form of setState (e.g., setItems(prev => ...)) for safe updates when depending on previous state.

6 Conditional Rendering the Right Way

Avoid deeply nested ternary operators or messy condition checks inside JSX. Instead, use early returns or separate components for clarity.

Bad Practice

return (
  <div>
    {isLoading ? (
      <p>Loading...</p>
    ) : error ? (
      <p>Error occurred</p>
    ) : (
      <UserProfile user={user} />
    )}
  </div>
);

Best Practice

function Content({ isLoading, error, user }) {
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error occurred</p>;
  return <UserProfile user={user} />;
}

Alternatively, use a switch statement for more conditions, or create dedicated components like <Loading /> for reusability.

7 Avoid Anonymous Functions Inside JSX

Anonymous functions inside JSX create a new function on every render, which may cause unnecessary re-renders in child components.

Bad Practice

<button onClick={() => handleClick(id)}>Delete</button>

Best Practice

import { useCallback } from 'react';

const MyComponent = ({ id, handleClick }) => {
  const handleDelete = useCallback(() => {
    handleClick(id);
  }, [id, handleClick]);

  return <button onClick={handleDelete}>Delete</button>;
};

Using useCallback ensures the function reference stays stable, optimizing for memoized children.

8 Integrate TypeScript for Type Safety

In 2026, TypeScript adoption in React projects is at 78%+. Use it to catch errors early, improve autocomplete, and make code more robust.

interface UserProps {
  name: string;
  age: number;
}

const UserComponent: React.FC<UserProps> = ({ name, age }) => {
  return <p>{name} is {age} years old.</p>;
};

Start with strict mode and use generics for flexible, type-safe components. Pros: Fewer bugs. Cons: Initial learning curve, but worth it for large apps.

9 Use React Server Components (RSC)

In 2026, React Server Components are a major performance feature. They allow parts of your UI to render on the server, reducing JavaScript sent to the client.

// Server Component (No client-side JS sent)
async function Products() {
  const data = await fetch('https://api.example.com/products');
  const products = await data.json();

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Use Server Components for static data and Client Components only when interactivity is required.

10 Use Feature-Based Folder Structure

A clean project structure improves scalability. Instead of organizing by file type, organize by feature.

src/
  features/
    auth/
      AuthPage.tsx
      authService.ts
      authSlice.ts
    dashboard/
      DashboardPage.tsx
      components/
        StatsCard.tsx
  shared/
    components/
      Button.tsx
    hooks/
      useFetch.ts

This structure makes refactoring easier and keeps related logic together.

11 Use React.memo for Component Memoization

Wrap components with React.memo to prevent re-renders when props haven't changed, especially useful for pure components in lists.

import { memo } from 'react';

const ListItem = memo(({ item }) => {
  console.log('Rendering item:', item); // Logs only on prop change
  return <li>{item}</li>;
});

Use with caution; custom comparison functions can be added if needed. Aligns with 2026's focus on performance via React Compiler.