Why Your React Native Components Don’t Need All Those Props (ISP)

From the author of the Telegram channel REACT NATIVE HUB

Join a growing community of React Native Devs! 👆

As React Native developers, we often strive to build components that are flexible and reusable. But in trying to do it all, we can easily fall into the trap of over-engineering. Ever built a button component that accepts five different props just to cover every possible use case?

That’s where the Interface Segregation Principle (ISP) comes in.

ISP reminds us to keep components lean and purpose-driven by only accepting the props they truly need. In this article, you’ll learn how applying this principle in your React Native components leads to cleaner code, better reusability, and fewer bugs — without sacrificing flexibility.

What Is the Interface Segregation Principle?

Definition: Clients should not be forced to depend on interfaces they do not use.
In React Native: Ensure that components accept only the props they need, and use custom hooks to separate different concerns.

Not following ISP

In this example, the extended interface is forced to implement all props even if it doesn’t need them.

// ❌ BAD EXAMPLE - Violating ISP
interface ButtonProps {
  label: string;
  onPress: () => void;
  icon: React.ReactNode; // Not all buttons need icons
  loading: boolean;    // Not all buttons need loading state
  disabled: boolean;   // Not all buttons need disabled state
}

const Button: React.FC<ButtonProps> = ({ label, onPress, icon, loading, disabled }) => {
  return (
    <TouchableOpacity onPress={onPress} disabled={disabled}>
      {loading ? <ActivityIndicator /> : <Text>{label}</Text>}
      {icon && icon}
    </TouchableOpacity>
  );
};

Following ISP

Now, let’s refactor this code by Segregating interfaces for different aspects of the button.

// ✅ GOOD EXAMPLE - Following ISP
interface BasicButtonProps {
  label: string;
  onPress: () => void;
}

interface LoadingButtonProps extends BasicButtonProps {
  loading: boolean;
}

// Simple button without unnecessary props
const SimpleButton: React.FC<BasicButtonProps> = ({ label, onPress }) => {
  return <TouchableOpacity onPress={onPress}><Text>{label}</Text></TouchableOpacity>;
};

// Button with loading state
const LoadingButton: React.FC<LoadingButtonProps> = ({ label, onPress, loading }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      {loading ? <ActivityIndicator /> : <Text>{label}</Text>}
    </TouchableOpacity>
  );
};