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 null; // 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.

12 Code Splitting with React.lazy and Dynamic Imports

Instead of shipping your entire application as one large JavaScript bundle, code splitting breaks it into smaller chunks that are loaded only when needed. React provides React.lazy() combined with dynamic import() to make this simple and effective.

Bad Practice (No Code Splitting)

// All components are imported at the top — entire bundle loads at once
import Dashboard from './Dashboard';
import Settings from './Settings';
import Analytics from './Analytics';

function App() {
  return <Dashboard />;
}

Best Practice (With Code Splitting)

import React, { Suspense } from 'react';

// Components are loaded only when needed
const Dashboard = React.lazy(() => import('./Dashboard'));
const Settings = React.lazy(() => import('./Settings'));

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

Pros: Reduces initial bundle size and load time significantly. Cons: Adds a brief loading delay the first time a lazy component is requested — always provide a good loading fallback.

13 List Virtualization for Long Lists

Rendering thousands of items in a list at once is one of the most common performance mistakes in React. List virtualization (also called windowing) solves this by only rendering the items that are currently visible on the screen. The most popular libraries for this are react-window and react-virtualized.

Bad Practice (Rendering All Items)

// Renders ALL 10,000 items at once — very slow!
const BigList = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

Best Practice (With react-window)

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const BigList = () => (
  <List
    height={500}        // height of the visible container
    itemCount={10000}   // total number of items
    itemSize={35}       // height of each row in pixels
    width="100%"
  >
    {Row}
  </List>
);

Pros: Dramatically improves scroll performance and reduces memory usage for long lists. Cons: Requires knowing item heights in advance for the best results with fixed-size lists.

14 Write Tests for Your Components

Testing is one of the most important habits you can build as a React developer. Writing tests ensures that your components work as expected — and more importantly, that future changes don't accidentally break existing features. In 2026, the standard testing stack for React is Jest for unit tests and React Testing Library (RTL) for component tests.

Example: Testing a Button Component with React Testing Library

// Button.jsx
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

export default Button;

// Button.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders the button with correct label', () => {
  render(<Button label="Click Me" onClick={() => {}} />);
  expect(screen.getByText('Click Me')).toBeInTheDocument();
});

test('calls onClick when button is clicked', () => {
  const handleClick = jest.fn(); // Mock function
  render(<Button label="Click Me" onClick={handleClick} />);
  fireEvent.click(screen.getByText('Click Me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

• Jest: A JavaScript test runner used to run unit tests and mock functions.
• React Testing Library (RTL): Tests components the way a real user would interact with them — by finding elements by text, role, or label instead of class names.
• Cypress: An end-to-end testing tool that tests your entire app in a real browser.

Pros: Catches bugs before they reach production, makes refactoring safer, and improves overall code quality. Cons: Takes time to write initially, but saves far more time in the long run by preventing regressions.