How to create a React component

When designing components, it is important to adhere to principles that foster clarity and simplicity. Each component should have a single responsibility, ensuring that it handles one part of the functionality. This modular approach allows developers to understand, test, and modify components in isolation.

function MyButton(props) {
  return (
    
      {props.label}
    
  );
}

In the example above, the MyButton component is focused solely on rendering a button with a click event. This exemplifies the principle of single responsibility, enabling developers to use the button in various contexts without concern for its internal workings.

Additionally, establishing a clear API for each component is paramount. The component’s interface should be intuitive, allowing other developers to utilize it without needing to delve into its implementation details. This can be achieved by using well-named props and maintaining consistency across components.

WD_BLACK 2TB SN7100 NVMe Internal Gaming SSD Solid State Drive - Gen4 PCIe, M.2 2280, Up to 7,250 MB/s - WDS200T4X0E [New Version]

(4751014)

7% Off $139.99 $129.99 (as of July 27, 2025 11:22 GMT +03:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

HIGH-OCTANE GAMING. Experience speeds up to 7,250MB/s(2) read and 6,900MB/s2 write (1-2TB(1) models), with up to 35% faster performance than previous generation(4). PURPOSE-BUILT. Designed for serious on-the-go gamers, with a PCIe Gen4 interface and ... read more

function MyInput(props) {
  return (
    
  );
}

The MyInput component demonstrates this idea by exposing a few props that define its behavior and appearance. Developers can easily understand how to use the component, making it straightforward to integrate into various forms or user interfaces.

Another critical aspect of component design is to ensure that components are composable. This means that components should be designed to work together seamlessly, allowing for complex interfaces to be built from simple, reusable pieces. By focusing on composition over inheritance, developers can avoid the pitfalls of tightly coupled code.

function Form() {
  const [name, setName] = useState("");

  return (
    

       setName(e.target.value)}
        placeholder="Enter your name"
      />
       alert(name)} />
    
  );
}

This Form component showcases how MyInput and MyButton can be combined to create a functional form. Each component maintains its independence while contributing to the overall functionality.

By laying a solid foundation for component design, developers can create applications that are not only effective but also easy to maintain and extend. This approach encourages a culture of quality and consistency throughout the development process, which is vital in today’s fast-paced software engineering landscape.

Contrasting functional and class component implementations

The evolution of component-based frameworks has presented developers with two primary paradigms for component implementation: functional components and class components. Historically, class components were the de facto standard for creating stateful and complex components that required lifecycle methods. Functional components, in contrast, were typically relegated to simpler, stateless rendering tasks, often referred to as “presentational” components due to their primary role in displaying data passed down through props.

A class component is defined using ES6 classes that extend a base component class provided by the framework. This structure provides a formal mechanism for defining state and behavior through methods and properties of the class. The core requirement is the implementation of a render method, which returns the component’s UI structure.

import React, { Component } from 'react';

class WelcomeMessage extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Conversely, a functional component is a plain JavaScript function that accepts a props object as its argument and returns a renderable element. The syntax is considerably more concise, which reduces the cognitive load required to understand the component’s purpose. It directly maps props to UI without the ceremony of a class definition.

import React from 'react';

function WelcomeMessage(props) {
  return <h1>Hello, {props.name}</h1>;
}

The distinction between these two approaches became less pronounced with the introduction of Hooks. Hooks are functions that allow functional components to “hook into” framework features, such as state and lifecycle methods, which were previously exclusive to class components. This innovation effectively leveled the playing field, enabling developers to build entire applications with functional components alone.

Consider the implementation of a simple counter. In a class component, state must be initialized in the constructor, and updates are performed using the this.setState method. The event handler for the button click also requires careful binding of the this context to ensure it refers to the component instance.

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleIncrement = this.handleIncrement.bind(this);
  }

  handleIncrement() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

The equivalent functional component achieves the same result with significantly less code, thanks to the useState Hook. The Hook returns a stateful value and a function to update it. This eliminates the need for a constructor, the this keyword, and manual event handler binding. The state logic is co-located with the rendering logic that uses it, which can improve readability for simple to moderately complex components.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

The verbosity of class components is not merely a stylistic concern; it introduces potential sources of error. The management of this is a frequent point of confusion for developers, leading to bugs that can be difficult to diagnose. Functional components, by closing over their props and state, avoid this entire class of problems. The logic becomes more straightforward because the component is just a function, and its behavior follows the predictable rules of function scopes and closures rather than the more complex rules of class instance contexts.

Managing state and properties effectively

Managing state and properties effectively is a cornerstone of component design. State and props are the lifeblood of React components, driving the dynamic behavior and presentation of the user interface. Understanding how to manipulate these effectively not only enhances the user experience but also streamlines the development process.

In functional components, the useState Hook provides a simple way to add state management. This allows developers to declare state variables directly within the component function, making it intuitive to read and reason about the component’s behavior. For example, think a scenario where a user can toggle a piece of text on and off:

import React, { useState } from 'react';

function ToggleText() {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(prev => !prev);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle Text</button>
      {isVisible && <p>Here is some toggleable text!</p>}
    </div>
  );
}

In this example, the ToggleText component utilizes state to manage the visibility of a paragraph. The visibility state is toggled with a button click, demonstrating a clean and concise approach to managing state without the overhead of class instances.

Props, on the other hand, are the means by which data is passed to components from their parent. When designing components, it’s vital to define props clearly. This not only improves usability but also ensures that components can be easily reused across different contexts. Ponder the following example of a card component that receives props for its content:

function Card({ title, content }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

The Card component is straightforward, taking title and content as props. This design allows for flexible usage in various contexts, as developers can pass different values to create distinct cards throughout the application.

Effective state and props management also includes validation and default values. Using PropTypes or TypeScript can help ensure that components receive the correct data types, reducing runtime errors and improving maintainability. For instance:

import PropTypes from 'prop-types';

Card.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
};

Card.defaultProps = {
  title: 'Default Title',
  content: 'Default content goes here.',
};

By enforcing prop types and setting default values, developers can create more robust components that fail gracefully in the event of incorrect usage. This proactive approach to managing state and properties significantly enhances the overall quality of the application, fostering a development environment where components are reliable and predictable.

As the complexity of applications grows, so does the need for effective state management solutions. Libraries such as Redux or Context API provide powerful mechanisms to manage global state across components. These tools help maintain a single source of truth, making it easier to manage state that’s shared across multiple components. For example, using the Context API allows components to consume state without passing props through every level of the component tree:

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div className={theme-${theme}}>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

In this pattern, the ThemeProvider manages the theme state and provides it to any descendant components that consume the context. This approach not only simplifies state management but also promotes a clean separation of concerns within the application architecture.

Through effective management of state and properties, developers can build components that are both functional and elegant. This attention to detail not only enhances the user experience but also sets the stage for a more maintainable and scalable codebase, which is essential for the longevity of any software project.

Ensuring component quality and reusability

Ensuring the quality of a component is intrinsically linked to its reusability. A component this is difficult to use, unpredictable, or brittle is unlikely to be adopted by other developers, even if it perfectly solves a specific problem. Quality, in this context, is a measure of a component’s fitness for reuse. It’s achieved through deliberate design choices that prioritize predictability, robustness, and clarity.

A fundamental characteristic of a high-quality, reusable component is its purity. A pure component, much like a pure function in functional programming, will always produce the same output for the same set of inputs (props). It does not have observable side effects, such as modifying global variables or making network requests directly within its rendering logic. This predictability is the bedrock of reusability, as it allows a developer to use the component with confidence, knowing that it will not introduce unexpected behavior into the application.

// Impure component - output depends on an external, mutable variable
let globalTextColor = 'black';

function ImpureStatusLabel({ text }) {
  // This component's color can change unexpectedly
  // if globalTextColor is modified elsewhere.
  return <span style={{ color: globalTextColor }}>{text}</span>;
}

// Pure component - output depends only on its props
function PureStatusLabel({ text, color }) {
  return <span style={{ color: color }}>{text}</span>;
}

The PureStatusLabel is demonstrably superior for reuse. Its appearance is controlled exclusively through its props, making it a self-contained and reliable building block. The impure version, by contrast, creates a hidden dependency that makes debugging and maintenance more difficult.

Beyond purity, a component’s reusability is heavily dependent on the clarity of its public interface, or API. The props a component accepts are its contract with the rest of the application. This contract should be well-defined and, ideally, self-documenting. Using tools like TypeScript or PropTypes to enforce types for props is a critical practice. It provides static guarantees about how a component should be used and surfaces errors during development rather than at runtime. A well-designed component API is intuitive and requires minimal cognitive overhead to use correctly.

Robustness is another pillar of quality, and it’s primarily achieved through systematic testing. Unit tests for components should verify that they render correctly for a given set of props and that they respond appropriately to user interactions. A comprehensive test suite acts as living documentation and provides a safety net against regressions. When a developer can reuse a component with the assurance that its core functionality is verified by tests, the barrier to adoption is significantly lowered.

// A conceptual test case for a button component
test('calls the onClick handler when clicked', () => {
  const handleClick = jest.fn(); // Create a mock function
  
  // Render the component with the mock handler
  render(<MyButton label="Submit" onClick={handleClick} />);
  
  // Simulate a user clicking the button
  fireEvent.click(screen.getByText('Submit'));
  
  // Assert that the mock handler was called exactly once
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Finally, designing for generalization is key to maximizing reusability. It’s common for a component to be created to solve a highly specific problem. The discipline lies in recognizing opportunities to abstract the specific logic into a more generic, configurable solution. This often involves replacing hardcoded content or behavior with props, or using the children prop to allow for flexible content composition. A component that displays a user’s avatar and name, for example, could be generalized into a generic Card component that can display any combination of images, titles, and text passed to it.

Building high-quality, reusable components is not an accidental outcome. It is the result of a disciplined engineering process that values predictability, clarity, robustness, and generalization. These practices reduce code duplication, accelerate development, and lead to a more maintainable and stable application codebase. What techniques and patterns have you found most effective in your own work for increasing component quality and fostering reuse?

Source: https://www.jsfaq.com/how-to-create-a-react-component/

You might also like this video