Turning a declarative description into imperative instructions

The second use case for a renderless component involves allowing users to describe their needs declaratively and then translating them into imperative instructions.

A good example of this use case is when working with a canvas or WebGL.

For example, in a canvas, to create a red rectangle with a green border, you would need to use imperative APIs to create and style the rectangle:

ctx.fillStyle = 'red';
ctx.strokeStyle = 'green';
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.fill();

Step by step, we instruct the canvas context to set fillStyle and strokeStyle and then draw a rectangle, based on the fill color and stroke color set.

When interacting with the canvas in an imperative manner, the code focuses on how to do things rather than what to do. This can result in code that is difficult to read and maintain, with a lot of low-level details that can make it hard to see the bigger picture...