Lessons Learned from Building with React Server Components

Building Flexible Components

Often we want to build a reusable component that provides some logic or layout, but is still allows the client to dictate what is rendered. I think an example is worth 1000 words here. Let's think about a List component.

export default function List({ items }: { items: string[] }) {
  return (
    <ul>
      {items.map(text => (<li>{text}</li>))}
    </ul>
  )
}

We pass in an array of strings that the List component iterates over and renders the items.

export default function Client() {
  const items = ['item 1', 'item 2', 'item 3'] 
 
  return <List items={items} />
}

If you've done this before, then you probably know where we're going next. Chances are you don't just want to render strings in your list. What if you're creating a nav and want to render anchor tags, or buttons, or maybe buttons with icons. Our List component not has control over what is rendered as well as how it's rendered. We can use composition to allow the client to specify the what while our component handles the how.

export default function List(({ children }: { children: react.ReactNode })) {
  return (
    <ul>
      {children}
    </ul>
  )
}
 
function ListItem({ children }: { children: react.ReactNode }) {
  return (
    <li>{children}</li>
  )
}
 
List.ListItem = ListItem

The client will have slightly more code, but they control what is rendered leading to a more flexible design.

export default function Client() {
  return (
    <List>
      <List.Item>Regular text</List.Item> 
      <List.Item><a href="#">an anchor tag</a></List.Item> 
      <List.Item>
        <button onClick={() => {}}>Click Me!</button>
      </List.Item> 
    </List>
  )
}

Avoiding Prop Drilling

Passing props to components an easy way to pass data from one component to another. Your first course of action when sharing state should be to try and lift it up to a common parent and pass it down. Prop drilling occurs when the shared parent is high up on your component tree and you end up with lots of components in the middle just passing state on to the next. React Context is a great way to get rid of prop drilling, but it's not the only one. We can also use composition to kind of "raise" those deep components higher up in the tree and reduce or eliminate the number of pass-through components.

function Parent() {
  const greeting = 'hello world'
 
  return (
    <>
      <h1>{greeting}</>
      <PassThrough message={greeting} />
    </>
  )
}
 
function PassThrough({ message }: { message: string }) {
  return (
    <div>
      <Child message={message} />
    </div>
  )
}
 
function Child({ message }: { message: string }) {
  return <div>{data}</div>
}

The only reason why PassThrough needs to know about the message prop is to pass it on the Child. We can use composition to remove the need by instead making PassThrough accept a children prop rather than directly rendering Child.

function Parent() {
  const greeting = 'hello world'
 
  return (
    <PassThrough>
      <Child message={greeting} />
    </PassThrough>
  )
}
 
function PassThrough({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {children}
    </div>
  )
}
 
function Child({ message }: { message: string }) {
  return <div>{message}</div>
}

These are the two areas I find myself reaching for component composition most often, but this is by no means an exhaustive list. Generally speaking, I've found myself reaching for composition more and more and I think it leads to more maintainable code bases. I also failed to mention passing components as props. Passing a component as a prop in a similar way that you would pass children is also composition. You can use this to pass multiple "children" to a component. Remember, a react component is just a function, you can pass it around like you would any function.