Search⌘ K
AI Features
Home
Courses
Building User Interfaces and Functions with TypeScript and React

Creating a Single Orchestrating Component

Explore how to refactor multiple UI components into a single generic React component that handles searching, sorting, and filtering data. Understand the benefits and tradeoffs of consolidating functionality to create cleaner, more manageable code while maintaining flexibility.

We'll cover the following...

Reviewing the effects of refactoring

Our SearchInput, Sorters, and Filters components have all been refactored to use the React render prop pattern. The code for the widgets and people data is far less complex than what we had previously in the App component. Here’s what the widgets data looks like now:

TypeScript 3.3.4
<h2>Widgets:</h2>
// This component will render a search input and corresponding searched list
<SearchInput
  data={widgets}
  renderItem={(widget) => <WidgetRenderer {...widget} />}
  initialSearchQuery=""
  searchKeys={["title", "description"]}
/>
// This component will render the sorters drop down and corresponding sorted list
<Sorters
  data={widgets}
  renderItem={(widget) => <WidgetRenderer {...widget}/>}
  label="Sort options for widgets!"
  initialSortProperty="title"
  initialIsDescending={false}
/>
// This component will render the truthy false radio buttons and corresponding filtered list
<Filters
  data={widgets}
  renderItem={(widget) => <WidgetRenderer {...widget}/>}
  label="Widget filters!"
  initialFilterProperties={[{
    property: "title",
    isTruthySelected: true
  }]}
/>

This is what the people data looks like:

TypeScript 3.3.4
<h2>People:</h2>
// This component will render a search input and corresponding searched list
<SearchInput
  data={people}
  renderItem={(person) => <PersonRenderer {...person} />}
  initialSearchQuery="Bob"
  searchKeys={["firstName", "lastName", "eyeColor"]}
/>
// This component will render the sorters drop down and corresponding sorted list
<Sorters
  data={people}
  renderItem={(person) => <PersonRenderer {...person} />}
  label="Sort options for people!"
  initialSortProperty="firstName"
  initialIsDescending={false}
/>
// This component will render the truthy false radio buttons and corresponding filtered list
<Filters
  data={people}
  renderItem={(person) => <PersonRenderer {...person} />}
  label="People filters!"
  initialFilterProperties={[{
    property: "firstName",
    isTruthySelected: true
  }]}
/>

One problem with this composition is that each functionality renders a separate list of the data. This is a disadvantage of the render prop pattern. It’s also immediately clear that all ...