Into headless components

TLDR, there is no rule set in stone for how to create a headless component, the most important factor: separating the logic from the view

What are headless components?

It’s all about how you abstract your components to build reusable UI

Headless components are patterns that help on separating the logic from the view.

Instead of wasting time explaining to you the ins and outs of the headless component philosophy, I will point you into the best explanation I’ve found:

https://react-table.tanstack.com/docs/overview

why headless components?

While researching why headless components I found a resource that exactly fits a software engineer’s best practice on why headless components, that is Clean Code from Robert C. Martin.

Chapter 3 Functions must:

Do one thing

Have one level of abstraction per function

If we take into account those points, separating the logic from the view makes sense.

Mixing levels of abstraction within a function is always confusing – page 36 chapter 3 functions from clean code. (show table component)

Examples of headless components in the wild and related literature

https://github.com/mui/material-ui/blob/v5.5.2/docs/data/material/components/menus/DenseMenu.tsx

Simplest ones

react-table

https://react-table.tanstack.com/docs/examples/basic

react dropzone

https://react-dropzone.js.org/#section-basic-example