10 React Mini-Patterns

The author, a senior React developer, shares ten commonly used React patterns that are valuable for beginners and experienced engineers alike, aiming to improve component design, readability, and maintainability.

1. Data Transmission – Pass data down through props and send updates back up via callback functions, illustrating a parent‑to‑child and child‑to‑parent communication model.

2. Fixing Native HTML Input – Use the onChange handler instead of raw JavaScript events, keep the value type consistent (e.g., convert strings to numbers), and unify similar UI elements like radio and select under a single <PickOneFromMany ui="radio"/> component.

3. Binding Unique IDs – Generate incremental IDs for inputs to associate them with <label> elements, resetting the counter per request to avoid server‑side duplication. Example implementation:

let count = 1;
export const resetId = () => { count = 1; };
export const getNextId = () => `element-id-${count++}`;

4. Controlling CSS via Props – Switch component styles by passing a theme prop (e.g., primary, secondary) or boolean flags like rounded. Sample usage: <Button theme="secondary">Hello</Button> 5. Switch Component – Map page identifiers to component modules using an object and render the appropriate component dynamically. Sample code:

import HomePage from './HomePage.jsx';
import AboutPage from './AboutPage.jsx';
const PAGES = { home: HomePage, about: AboutPage };
const Page = props => { const Handler = PAGES[props.page] || FourOhFourPage; return <Handler {...props} />; };

6. Autofocus – Focus an input when a modal mounts by storing a ref and calling focus() in componentDidMount. Example:

class SignInModal extends Component {
  componentDidMount() { this.InputComponent.focus(); }
  render() { return (<div><label>User name:</label><Input ref={c => this.InputComponent = c} /></div>); }
}

7. Almost Component – Render a list of search suggestions without creating a separate component for each item. Use a functional helper to generate <li> elements:

const renderSearchSuggestion = item => (<li key={item.id}>{item.name}</li>);
const SearchSuggestions = props => (<ul>{props.listItems.map(renderSearchSuggestion)}</ul>);

8. Formatting Component – A <Price> component formats numbers as currency or plain numbers based on props. Example snippet:

const Price = props => {
  const price = props.children.toLocaleString('en', {
    style: props.showSymbol ? 'currency' : undefined,
    currency: props.showSymbol ? 'USD' : undefined,
    maximumFractionDigits: props.showDecimals ? 2 : 0,
  });
  return <span className={props.className}>{price}</span>;
};

9. Store Service for Components – Keep component logic simple by moving state handling to a centralized store, ensuring data matches component expectations, and using helper modules for type conversion and normalization.

10. Avoid Relative Imports – Replace deep relative paths with a barrel index.js and Webpack resolve.alias to import components cleanly, improving IDE navigation and reducing linting errors.

The article concludes with references to the original “10 React mini‑patterns” source and additional reading links.