React components are the building blocks of your UI. Understanding how they manage form state, when they re-render, and how to reuse behavior helps you write clearer, more maintainable applications.

Here are 3 core component concepts every React developer should understand.

1. Controlled and Uncontrolled Components

Controlled components

A controlled component is a form element whose value is managed by React state.

import { useState } from "react";

function ControlledInput() {
  const [value, setValue] = useState("");

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

Why use controlled components?

• Validate input as the user types.
• Conditionally render UI based on form values.
• Keep form data synchronized with React state.

Uncontrolled components

An uncontrolled component stores its current value in the DOM. React can access it through a ref when needed.

import { useRef } from "react";

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input ref={inputRef} defaultValue="" />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

When should you use each approach?

• Controlled: Dynamic forms, validation, and conditional UI.
• Uncontrolled: Simple forms or integrations with non-React libraries.

2. Pure Components

A pure component avoids unnecessary updates when its props and state have not changed. In modern React, React.memo can memoize a function component based on its props.

import { memo } from "react";

const User = memo(function User({ name }) {
  console.log("Rendering User");

  return <div>{name}</div>;
});

By default, React.memo compares each prop using Object.is. If the props are unchanged, React can skip rendering the component.

Important: React.memo is a performance optimization, not a guarantee that the component will never render again. State changes and consumed context updates can still trigger rendering.

3. Higher-Order Components (HOCs)

A Higher-Order Component (HOC) is a function that takes a component and returns a new component with additional behavior.

function withLogger(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log("Rendering", WrappedComponent.name);

    return <WrappedComponent {...props} />;
  };
}

Usage:

function User({ name }) {
  return <div>{name}</div>;
}

const UserWithLogger = withLogger(User);

Common use cases:

• Authentication and authorization.
• Logging and analytics.
• Reusing cross-cutting behavior across components.

HOCs are less common in modern React code because hooks often provide a simpler way to reuse stateful logic.