# Component FAQ

## What is the difference between Alpine and Loki Components?
A regular Alpine component is instantiated via the HTML attribute `x-data` of some HTML element and bound to the same HTML element (so that Alpine `x-*` bindings come into action). The `x-data` attribute refers to component data defined somewhere: An inline JSON definition, an external function or by using `Alpine.data()`. With Loki, we use exclusively `Alpine.data()`.

A Loki Component is an Alpine component. However, the `x-data` attribute refers to ready-made components (like the base `LokiComponent`). Through this, each Loki Component gets a lot of out-of-the-box functionality, among which the option to submit data back to the server with an AJAX request and to update other HTML elements using the AJAX response.

## When would I build a Loki Component?
You would transform a regular component into a Loki Component, if you would like to add the following features:

- When you want to submit data from the browser back to the server (aka an AJAX call);
- When you want to add AlpineJS behaviour, without writing everything yourself;

## When does a block not need to be a Loki Component?

- If it is just being refreshed by being a `<target/>`
- If it is only displaying data, retrieved from a regular ViewModel (so not a `ComponentViewModel`)
- If the block is only rendering child-blocks