Atomico

Small library for the creation of interfaces based on web-components, only using functions and hooks.

import { h, customElement } from "atomico";

function WebComponent() {
    return <host>hello word</host>;
}

customElement("web-component", WebComponent);

1. installation
2. Hooks
   1. useState
   2. useEffect
   3. useReducer
   4. useMemo
   5. useRef
   6. useHost
3. modules
   1. atomico/lazy
   2. atomico/router
4. examples

Hooks

What are hooks?

Gooks, allows to add states and effects(life cycle) to functional components, allowing to reuse the logic between components in a simple and scalable way.

Why use hooks?

1. Reuse of logic between components, unlike a class its components will not require belonging to the context of this.

2. Simpler and less code, when using hooks your component will not require a declaration as a class, bringing as a benefit less code as your application scales.

useState

let [state, setState] = useState(initialState);

setState function, allows controlling one or more states associated with a component, the declarationlet [state, setState], is equivalent to:

1. state : current state
2. setState : status updater, if setState receives a function as a parameter it will receive and must return the next state.

Example

function WebComponent() {
    let [state, setState] = useState(0);
    return (
        <host>
            <h1>example counter</h1>
            <button onClick={() => setState(state + 1)}>Increment</button>
        </host>
    );
}

useEffect

useEffect(afterRender);

useEffect function allows you to add side effects to a component.

function WebComponent() {
    useEffect(() => {
        document.head.title = "web-component mounted";
        return () => (document.head.title = "web-component unmounted");
    }, []);

    return (
        <host>
            <h1>example useEffect</h1>
        </host>
    );
}

useEffect, supports a second matrix of type of parameter, this allows to compare between renders the immutability of the parameters of the array, if there is a change useEffect will be executed again, the previous example will execute the function only when the component has been mounted.

useReducer

let [state, dispatch] = useReducer(reducer, initialState);

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case "increment":
            return { count: state.count + 1 };
        case "decrement":
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}

function WebComponent() {
    let [state, dispatch] = useReducer(reducer, initialState);
    return (
        <host>
            Count: {state.count}
            <button onClick={() => dispatch({ type: "increment" })}>+</button>
            <button onClick={() => dispatch({ type: "decrement" })}>-</button>
        </host>
    );
}

useMemo

let memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo will only recalculate the stored value when one of the dependencies has changed. This optimization helps avoid costly calculations in each render.

useRef

let ref = useRef(initialValue);

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

useHost

let ref = useHost();

Returns a ref object, which allows to extract extract the web-component, it is ideal for the construction of hooks that interact with web-components directly.