# Patterns

## React Patterns [on GitHub](https://github.com/chantastic/reactpatterns.com) <a href="#react-patterns-on-github" id="react-patterns-on-github"></a>

### Contents <a href="#contents" id="contents"></a>

* [Function component](https://reactpatterns.com/#function-component)
* [Destructuring props](https://reactpatterns.com/#destructuring-props)
* [JSX spread attributes](https://reactpatterns.com/#jsx-spread-attributes)
* [Merge destructured props with other values](https://reactpatterns.com/#merge-destructured-props-with-other-values)
* [Conditional rendering](https://reactpatterns.com/#conditional-rendering)
* [Children types](https://reactpatterns.com/#children-types)
* [Array as children](https://reactpatterns.com/#array-as-children)
* [Function as children](https://reactpatterns.com/#function-as-children)
* [Render prop](https://reactpatterns.com/#render-prop)
* [Children pass-through](https://reactpatterns.com/#children-pass-through)
* [Proxy component](https://reactpatterns.com/#proxy-component)
* [Style component](https://reactpatterns.com/#style-component)
* [Event switch](https://reactpatterns.com/#event-switch)
* [Layout component](https://reactpatterns.com/#layout-component)
* [Container component](https://reactpatterns.com/#container-component)
* [Higher-order component](https://reactpatterns.com/#higher-order-component)
* [State hoisting](https://reactpatterns.com/#state-hoisting)
* [Controlled input](https://reactpatterns.com/#controlled-input)

### Function component <a href="#function-component" id="function-component"></a>

The simplest way to declare reusable components.<br>

They're just functions.

```javascript
function Greeting() {
  return <div>Hi there!</div>;
}
```

Collect `props` from the first argument of your function.

```javascript
function Greeting(props) {
  return <div>Hi {props.name}!</div>;
}
```

Define any number of local variables to do what you need in your function components.\
**Always return your React Component at the end.**

```
function Greeting(props) {
  let style = {
    fontWeight: "bold",
    color: context.color
  };

  return <div style={style}>Hi {props.name}!</div>;
}
```

Set defaults for any required `props` using `defaultProps`.

```
function Greeting(props) {
  return <div>Hi {props.name}!</div>;
}
Greeting.defaultProps = {
  name: "Guest"
};
```

### Destructuring props <a href="#destructuring-props" id="destructuring-props"></a>

[Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) is a JavaScript feature.\
It was added to the language in ES2015.\
So it might not look familia

Think of it like the opposite of literal assignment.

```javascript
let person = { name: "chantastic" };
let { name } = person
```

Works with Arrays too.

```
let things = ["one", "two"];
let [first, second] = things;
```

Destructuring assignment is used a lot in [function components](https://reactpatterns.com/#function-component).\
These component declarations below are equivalent.

```
function Greeting(props) {
  return <div>Hi {props.name}!</div>;
}

function Greeting({ name }) {
  return <div>Hi {name}!</div>;
}
```

There's a syntax for collecting remaining `props` into an object.\
It's called [rest parameter syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) and looks like this.

```
function Greeting({ name, ...restProps }) {
  return <div>Hi {name}!</div>;
}
```

Those three dots (`...`) take all the remaining properties and assign them to the object `restProps`.

So, what do you do with `restProps` once you have it?\
Keep reading...

### JSX spread attributes <a href="#jsx-spread-attributes" id="jsx-spread-attributes"></a>

Spread Attributes is a feature of [JSX](https://reactjs.org/docs/introducing-jsx.html).\
It's a syntax for providing an object's properties as JSX attributes.

Following the example from [Destructuring props](https://reactpatterns.com/#destructuring-props),\
We can **spread** `restProps` over our `<div>`.

```
function Greeting({ name, ...restProps }) {
  return <div {...restProps}>Hi {name}!</div>;
}
```

This makes `Greeting` super flexible.\
We can pass DOM attributes to `Greeting` and trust that they'll be passed through to `div`.

```
<Greeting name="Fancy pants" className="fancy-greeting" id="user-greeting" />
```

Avoid forwarding non-DOM `props` to components.\
Destructuring assignment is popular because it gives you a way to separate component-specific props from DOM/platform-specific attributes.

```
function Greeting({ name, ...platformProps }) {
  return <div {...platformProps}>Hi {name}!</div>;
}
```

### Merge destructured props with other values <a href="#merge-destructured-props-with-other-values" id="merge-destructured-props-with-other-values"></a>

Components are abstractions.\
Good abstractions allow for extension.

Consider this component that uses a `class` attribute for style a `button`.

```
function MyButton(props) {
  return <button className="btn" {...props} />;
}
```

This works great until we try to extend it with another class.

```
<MyButton className="delete-btn">Delete...</MyButton>
```

In this case, `delete-btn` replaces `btn`.

Order matters for [JSX spread attributes](https://reactpatterns.com/#jsx-spread-attributes).\
The `props.className` being spread is overriding the `className` in our component.

We can change the order but now the `className` will **never** be anything but `btn`.

```
function MyButton(props) {
  return <button {...props} className="btn" />;
}
```

We need to use destructuring assignment to get the incoming `className` and merge with the base `className`.\
We can do this simply by adding all values to an array and joining them with an space.

```
function MyButton({ className, ...props }) {
  let classNames = ["btn", className].join(" ");

  return <button className={classNames} {...props} />;
}
```

To guard from `undefined` showing up as a className,\
Use [default values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Default_values_2).

```
function MyButton({ className = "", ...props }) {
  let classNames = ["btn", className].join(" ");

  return <button className={classNames} {...props} />;
}
```

### Conditional rendering <a href="#conditional-rendering" id="conditional-rendering"></a>

You can't use if/else statements inside a component declarations.\
So [conditional (ternary) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) and [short-curcuit evaluation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation) are your friends.

#### `if` <a href="#if" id="if"></a>

```
{
  condition && <span>Rendered when `truthy`</span>;
}
```

#### `unless` <a href="#unless" id="unless"></a>

```
{
  condition || <span>Rendered when `falsy`</span>;
}
```

#### `if-else` <a href="#if-else" id="if-else"></a>

```
{
  condition ? (
    <span>Rendered when `truthy`</span>
  ) : (
    <span>Rendered when `falsy`</span>
  );
}
```

### Children types <a href="#children-types" id="children-types"></a>

React can render `children` from most types.\
In most cases it's either an `array` or a `string`.

#### `String` <a href="#string" id="string"></a>

```
<div>Hello World!</div>
```

#### `Array` <a href="#array" id="array"></a>

```
<div>{["Hello ", <span>World</span>, "!"]}</div>
```

### Array as children <a href="#array-as-children" id="array-as-children"></a>

Providing an array as `children` is a very common.\
It's how lists are drawn in React.

We use `map()` to create an array of React Elements for every value in the array.

```
<ul>
  {["first", "second"].map(item => (
    <li>{item}</li>
  ))}
</ul>
```

That's equivalent to providing a literal `array`.

```
<ul>{[<li>first</li>, <li>second</li>]}</ul>
```

This pattern can be combined with destructuring, JSX Spread Attributes, and other components, for some serious terseness.

```
<ul>
  {arrayOfMessageObjects.map(({ id, ...message }) => (
    <Message key={id} {...message} />
  ))}
</ul>
```

### Function as children <a href="#function-as-children" id="function-as-children"></a>

React components don't support functions as `children`. However, [render props](https://reactpatterns.com/#render-props) is a pattern for creating components that take functions as children.

### Render prop <a href="#render-prop" id="render-prop"></a>

Here's a component that uses a render callback.\
It's not useful, but it's an easy illustration to start with.

```
const Width = ({ children }) => children(500);
```

The component calls `children` as a function, with some number of arguments. Here, it's the number `500`.

To use this component, we give it a [function as `children`](https://reactpatterns.com/#function-as-children).

```
<Width>{width => <div>window is {width}</div>}</Width>
```

We get this output.

```
<div>window is 500</div>
```

With this setup, we can use this `width` to make rendering decisions.

```
<Width>
  {width => (width > 600 ? <div>min-width requirement met!</div> : null)}
</Width>
```

If we plan to use this condition a lot, we can define another components to encapsulate the reused logic.

```
const MinWidth = ({ width: minWidth, children }) => (
  <Width>{width => (width > minWidth ? children : null)}</Width>
);
```

Obviously a static `Width` component isn't useful but one that watches the browser window is. Here's a sample implementation.

```
class WindowWidth extends React.Component {
  constructor() {
    super();
    this.state = { width: 0 };
  }

  componentDidMount() {
    this.setState(
      { width: window.innerWidth },
      window.addEventListener("resize", ({ target }) =>
        this.setState({ width: target.innerWidth })
      )
    );
  }

  render() {
    return this.props.children(this.state.width);
  }
}
```

Many developers favor [Higher Order Components](https://reactpatterns.com/#higher-order-component) for this type of functionality. It's a matter of preference.

### Children pass-through <a href="#children-pass-through" id="children-pass-through"></a>

You might create a component designed to apply `context` and render its `children`.

```
class SomeContextProvider extends React.Component {
  getChildContext() {
    return { some: "context" };
  }

  render() {
    // how best do we return `children`?
  }
}
```

You're faced with a decision. Wrap `children` in an extraneous `<div />` or return `children` directly. The first options gives you extra markup (which can break some stylesheets). The second will result in unhelpful errors.

```
// option 1: extra div
return <div>{children}</div>;

// option 2: unhelpful errors
return children;
```

It's best to treat `children` as an opaque data type. React provides `React.Children` for dealing with `children` appropriately.

```
return React.Children.only(this.props.children);
```

### Proxy component <a href="#proxy-component" id="proxy-component"></a>

*(I'm not sure if this name makes sense)*

Buttons are everywhere in web apps. And every one of them must have the `type` attribute set to "button".

```
<button type="button">
```

Writing this attribute hundreds of times is error prone. We can write a higher level component to proxy `props` to a lower-level `button`component.

```
const Button = props =>
  <button type="button" {...props}>
```

We can use `Button` in place of `button` and ensure that the `type`attribute is consistently applied everywhere.

```
<Button />
// <button type="button"><button>

<Button className="CTA">Send Money</Button>
// <button type="button" class="CTA">Send Money</button>
```

### Style component <a href="#style-component" id="style-component"></a>

This is a [Proxy component](https://reactpatterns.com/#proxy-component) applied to the practices of style.

Say we have a button. It uses classes to be styled as a "primary" button.

```
<button type="button" className="btn btn-primary">
```

We can generate this output using a couple single-purpose components.

```
import classnames from "classnames";

const PrimaryBtn = props => <Btn {...props} primary />;

const Btn = ({ className, primary, ...props }) => (
  <button
    type="button"
    className={classnames("btn", primary && "btn-primary", className)}
    {...props}
  />
);
```

It can help to visualize this.

```
PrimaryBtn()
  ↳ Btn({primary: true})
    ↳ Button({className: "btn btn-primary"}, type: "button"})
      ↳ '<button type="button" class="btn btn-primary"></button>'
```

Using these components, all of these result in the same output.

```
<PrimaryBtn />
<Btn primary />
<button type="button" className="btn btn-primary" />
```

This can be a huge boon to style maintenance. It isolates all concerns of style to a single component.

### Event switch <a href="#event-switch" id="event-switch"></a>

When writing event handlers it's common to adopt the `handle{eventName}` naming convention.

```
handleClick(e) { /* do something */ }
```

For components that handle several event types, these function names can be repetitive. The names themselves might not provide much value, as they simply proxy to other actions/functions.

```
handleClick() { require("./actions/doStuff")(/* action stuff */) }
handleMouseEnter() { this.setState({ hovered: true }) }
handleMouseLeave() { this.setState({ hovered: false }) }
```

Consider writing a single event handler for your component and switching on `event.type`.

```
handleEvent({type}) {
  switch(type) {
    case "click":
      return require("./actions/doStuff")(/* action dates */)
    case "mouseenter":
      return this.setState({ hovered: true })
    case "mouseleave":
      return this.setState({ hovered: false })
    default:
      return console.warn(`No case for event type "${type}"`)
  }
}
```

Alternatively, for simple components, you can call imported actions/functions directly from components, using arrow functions.

```
<div onClick={() => someImportedAction({ action: "DO_STUFF" })}
```

Don't fret about performance optimizations until you have problems. Seriously don't.

### Layout component <a href="#layout-component" id="layout-component"></a>

Layout components result in some form of static DOM element. It might not need to update frequently, if ever.

Consider a component that renders two `children` side-by-side.

```
<HorizontalSplit
  leftSide={<SomeSmartComponent />}
  rightSide={<AnotherSmartComponent />}
/>
```

We can aggressively optimize this component.

While `HorizontalSplit` will be `parent` to both components, it will never be their `owner`. We can tell it to update never, without interrupting the lifecycle of the components inside.

```
class HorizontalSplit extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    <FlexContainer>
      <div>{this.props.leftSide}</div>
      <div>{this.props.rightSide}</div>
    </FlexContainer>;
  }
}
```

### Container component <a href="#container-component" id="container-component"></a>

"A container does data fetching and then renders its corresponding sub-component. That’s it."—[Jason Bonta](https://twitter.com/jasonbonta)

Given this reusable `CommentList` component.

```
const CommentList = ({ comments }) => (
  <ul>
    {comments.map(comment => (
      <li>
        {comment.body}-{comment.author}
      </li>
    ))}
  </ul>
);
```

We can create a new component responsible for fetching data and rendering the `CommentList` function component.

```
class CommentListContainer extends React.Component {
  constructor() {
    super()
    this.state = { comments: [] }
  }

  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: comments =>
        this.setState({comments: comments});
    })
  }

  render() {
    return <CommentList comments={this.state.comments} />
  }
}
```

We can write different containers for different application contexts.

### Higher-order component <a href="#higher-order-component" id="higher-order-component"></a>

A [higher-order function](https://en.wikipedia.org/wiki/Higher-order_function) is a function that takes and/or returns a function. It's not more complicated than that. So, what's a higher-order component?

If you're already using [container components](https://reactpatterns.com/#container-component), these are just generic containers, wrapped up in a function.

Let's start with our `Greeting` component.

```
const Greeting = ({ name }) => {
  if (!name) {
    return <div>Connecting...</div>;
  }

  return <div>Hi {name}!</div>;
};
```

If it gets `props.name`, it's gonna render that data. Otherwise it'll say that it's "Connecting...". Now for the the higher-order bit.

```
const Connect = ComposedComponent =>
  class extends React.Component {
    constructor() {
      super();
      this.state = { name: "" };
    }

    componentDidMount() {
      // this would fetch or connect to a store
      this.setState({ name: "Michael" });
    }

    render() {
      return <ComposedComponent {...this.props} name={this.state.name} />;
    }
  };
```

This is just a function that returns component that renders the component we passed as an argument.

Last step, we need to wrap our our `Greeting` component in `Connect`.

```
const ConnectedMyComponent = Connect(Greeting);
```

This is a powerful pattern for providing fetching and providing data to any number of [function components](https://reactpatterns.com/#function-component).

### State hoisting <a href="#state-hoisting" id="state-hoisting"></a>

[function-component](https://reactpatterns.com/#function-component) don't hold state (as the name implies).

Events are changes in state. Their data needs to be passed to stateful [container components](https://reactpatterns.com/#container-component) parents.

This is called "state hoisting". It's accomplished by passing a callback from a container component to a child component.

```
class NameContainer extends React.Component {
  render() {
    return <Name onChange={newName => alert(newName)} />;
  }
}

const Name = ({ onChange }) => (
  <input onChange={e => onChange(e.target.value)} />
);
```

`Name` receives an `onChange` callback from `NameContainer` and calls on events.

The `alert` above makes for a terse demo but it's not changing state. Let's change the internal state of `NameContainer`.

```
class NameContainer extends React.Component {
  constructor() {
    super();
    this.state = { name: "" };
  }

  render() {
    return <Name onChange={newName => this.setState({ name: newName })} />;
  }
}
```

The state is *hoisted* to the container, by the provided callback, where it's used to update local state. This sets a nice clear boundary and maximizes the re-usability of function component.

This pattern isn't limited to function components. Because function components don't have lifecycle events, you'll use this pattern with component classes as well.

[*Controlled input*](https://reactpatterns.com/#controlled-input) *is an important pattern to know for use with state hoisting*

*(It's best to process the event object on the stateful component)*

### Controlled input <a href="#controlled-input" id="controlled-input"></a>

It's hard to talk about controlled inputs in the abstract. Let's start with an uncontrolled (normal) input and go from there.

```
<input type="text" />
```

When you fiddle with this input in the browser, you see your changes. This is normal.

A controlled input disallows the DOM mutations that make this possible. You set the `value` of the input in component-land and it doesn't change in DOM-land.

```
<input type="text" value="This won't change. Try it." />
```

Obviously static inputs aren't very useful to your users. So, we derive a `value` from state.

```
class ControlledNameInput extends React.Component {
  constructor() {
    super();
    this.state = { name: "" };
  }

  render() {
    return <input type="text" value={this.state.name} />;
  }
}
```

Then, changing the input is a matter of changing component state.

```
return (
  <input
    value={this.state.name}
    onChange={e => this.setState({ name: e.target.value })}
  />
);
```

This is a controlled input. It only updates the DOM when state has changed in our component. This is invaluable when creating consistent UIs.

*If you're using* [*function components*](https://reactpatterns.com/#function-component) *for form elements, read about using* [*state hoisting*](https://reactpatterns.com/#state-hoisting) *to move new state up the component tree.*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ricardomol.gitbook.io/notes/frontend/react/patterns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.