A component that renders nothing: React headless components and inversion of control
June 28, 2022
15:45
15:15
Hall B

The web is full of bad UI components. It is not rare to see a menu that doesn't react to arrow keys or a select box that doesn't support screen readers. Building these components is really (really!) hard so developers rely on UI libraries like MUI to solve that problem for them. They work, but are often hard to customize to your company’s style. So you’re left with either building your own badly behaving components, or using good components that just don’t fit the style you need.

Incredibly enough, there is a solution: React headless components, which implement the behavior of the components, but leave the rendering and styling up to you. The best of both worlds!

In this talk I will explain the problems we encounter when building our own components, the problems we encounter customizing existing library components, and how headless components solve both problems using the inversion of control design pattern.

Nir Ben-Yair
Nir Ben-Yair
Nir Ben-Yair
Nir Ben-Yair
Nir Ben-Yair
Frontend Team Lead
Nir Ben-Yair

Frontend Team Lead @Gloat, 6 years of experience, Host of the "Frontend Land" podcast and creator of the "Memeking" app, www.memeking.co.il

Cancellation Policy

Sponsor Cancellation:

In case of cancellation of the event, we will offer a full refund to all attendees and sponsors.

Attendee cancellations:

Up to 30 days prior to the event – 100% Refund 30-14 days prior to the event – 50% Refund No refund will be offered later than that.

Cancellation Policy

Sponsor Cancellation:

In case of cancellation of the event, we will offer a full refund to all attendees and sponsors.

Attendee cancellations:

Up to 30 days prior to the event – 100% Refund.
30-14 days prior to the event – 50% Refund.
No refund will be offered later than that.