Break Out Composite Components

Don’t be afraid to split components into smaller components. Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a label, a rounded profile picture: all those are commonly expressed as components.

Stateless Component

The simplest way to declare a component is to create a CKStatelessComponent. A CKStatelessComponent is based on the concept of purity in functional programming paradigms, meaning that it renders the same output for the same input (in this case props) with no need of a state dependency.

struct NewComponentProps {
  UIEdgeInsets insets;
}
CKComponent *NewComponent(const NewComponentProps &props)
{
  return CKCreateStatelessComponent(
          CK::InsetComponentBuilder()
            .insets(props.insets)
            .component([AwesomeComponent new])
            .build(),
          __func__); // __func__ is used to easily identify your stateless component in DEBUG
}

Stateless component are optimized to have the minimum memory and binary size impact and lifts off the need of making all of your components an Objective-C class.

Composite Components

When your component depends on an internal state that is used to render its content you can create your new component as subclass of `CKCompositeComponent.