<meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">

<p class="docs__intro">Composi is the gradual evolution of front-end development since 2007. Its genesis was in the library <a target='__blank' href="http://chocolatechip-ui.github.io">ChocolateChip-UI</a>. As an experiment, we took the component API from ChocolateChip-UI and combined it with a small and fast virtual dom. The result was Composi. Because of the virtual dom, when you change the state or data that a component uses, it updates automatically.</p>

<p>Although only <code>3KB</code>, Composi includes everything you need to create complex components. The Composi virtual dom code is less that <code>1KB</code>. It will only update the parts of the DOM that do not match the current state of a component. If you try to render a component with the same data again, no update will occur.</p>

<p>Composi shares some features and many development patterns with React, Preact and Inferno. All have a Component class and a virtual dom. However, Composi is not a React clone. Internally it works quite differently. Most of the similarities arrise from the use of JSX. Composi's Component class shares some naming conventions with React.Component. Both have a <code>render</code> function, which works basically the same. It takes some data and returns some markup that gets converted into a virtual node. With React and friends, you pass a component class definition to the <code>render</code> function along with an elemement in which you want to insert it. This is completely unnecessary with Composi components. Instead you define a container property directly in the component definition.</p>

<meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">

<meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">

<p>The component's <code>render</code> function is used to define markup that will get converted into elements and inserted into the DOM. The render function is also used every time the component is updated. Rendering the component with new data or changing the state of a stateful component causes the component use this render function to create a new virtual dom. Composi compares the component's new virtual dom with its previous one. If they do not match, the new one is used to patch and update the DOM. This results in fast and efficient updating of the DOM based on current state.</p>

<meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">

<meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">

<meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">

<meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">

<p>When you create components with the Component class, you have a reference for the component's properties, methods, etc. This also provides a point of reference for the virtual dom. In contrast, functional components do not have this reference for their virtual dom. Instead, with functional components, the scope in which the function is invoked becomes the scope for the virtual dom. This means as your project grows and code gets out over many files, the scope of a functional component can be spread across several files. For components this is not a problem. For functional components this means the first time it gets invoked in a new scope, the previous virtual dom will be replaced by a new one. Unless you are creating a list with 10,000 or more items, you won't notice any inefficencies. However, it does result in more layout thrashing than when creating class-based components.</p>

<p>As you can see above, we need to get the value of the input. If the value is truthy, we push it to the items array. Then we re-render the functional component list. Because this is a different scope than <code>app.js</code> where we initially rendered the list, the first time we add an item, the list will be created a new, replacing what was there. That's because this is a different scope than <code>app.js</code>. However, with every new addition, the render function will use the new virtual dom in this scope to patch the DOM efficiently.</p>

<p>And that's it. With that we now have an interactive functional component that updates in real time with a virtual dom.</p>

<p>Although you can build a complex app using nothing but functional components, there are certain conveniences when using the Component class. First and foremost is the fact that classes allow you to encapsulate functionality using properties and methods defined directly on the component. The second is the component itself enables more efficient use of the virtual dom because it keeps track of that internally. Because of this, you can have multiple class components in the same container. With functional components, because the virtual dom is created and handle by the <code>render</code> function, there can only be one functional component in each container.</p>

<meta name="description" content="Composi is a JavaScript library for creating component-based interfaces. It uses the virtual dom to make efficient updates to the DOM based on a component's data or state.">