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:
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