Hooks

What are hooks?

Hooks are helper functions that let you add specific functionalities in your Wompo components. This functions will "hook" into the component so that they have access to the whole HTML instance and operate adding functionalities to it. More specifically, they allow to:

• Make your component dynamic
• Create callbacks that will be executed on specific cases
• Keep a variable's value stable across renders
• Get a specific Context
• Optimize performances by avoiding useless re-renderings

Hooks work like import statements inside a component. This implies that:

1. Like import statements, they must be declared on top of the component, in the first lines, before any operation is performed.
2. They cannot be conditional or executed inside loops.

If these conditions are not respected, the component might have unexpected behaviors.

Wompo offers a good variety of hooks, but you are also completely free to create your own very easily.

State hooks

State hooks are what allow to make a component dynamic and cause a re-render of it, so that you can see visual updates in your component. To do that, Wompo offers the following hooks:

• useState - Probably the most common hook you will use: creates a stateful variable and a setter function that will cause a re-render of the component when called (if the new value differs from the old one).
• useReducer - For Redux fans. This hook allows to elegantly handle the state of a component using a reducer to handle all the operations to alter the state and a dispatch function to set the new state.

Effect hooks

Effect hooks are what allow to execute a specific callback when one of your dependencies changes, or simply on the first (or on every) render. This dependencies are simply an array of values. The effect hooks are:

• useEffect - After useState, the probably second most common hook you will use: will execute the callback after a render if any of its dependencies changed. The callback will be executed Asynchronously.
• useLayoutEffect - It's the same as the useEffect hook. The only difference is that the callback is executed Synchronously immediately after a render, before you can see visual changes. The useEffect hook is preferred, because it'll not saturate the JS call stack.

Performance hooks

Performance hooks let you skip useless operations across renders, or keep a value stable between renders so it's not re-initialized every time, allowing to optimize the component by avoiding unnecessary re-renderings.
Performance hooks are:

• useRef - It'll keep a value stable across renders, by always returning the last saved value. It can optionally also be used to reference a node in the DOM.
• useCallback - The useCallback hook will take a function and save it so that it's not re-created on every render. This is useful if you're using a function as an attribute value of some other components, because the attribute will always have the same value (remember that in Javascript two functions are never equal, unless a function is compared to itself).
• useMemo - This hook will let you execute a callback function and elaborate its result only when a dependency changes, rather than on every render.

Context hooks

A Context hook will let you obtain a value provided by another parent element, more specifically, a Context.Provider element. There is only one context hook:

• useContext - Will return the value provided by the closest parent Context.Provider of the specified context. If there is not one, the default value of the context will be returned instead. The component that uses this hook will automatically re-render whenever the value provided by the provider changes.

Helper hooks

Helper hooks are simple hooks that solve common problems. The currently available helper hooks are:

• useSelf - Will return the HTML instance of the custom component.
• useId - Will return a unique string in the format :w<number>:. The ID will not change on every re-render. This is useful when you want to use IDs for node elements inside of a component. Common use cases are for inputs, labels, and accessibility.
• useExposed - The useExposed hook will let you expose some values and/or functions in the comonent's instance of the DOM. This allows, for example, to select a DOM node and call a method on it. Can be useful to Expose the state. Commonly used in combination with the useRef hook.
• useAsync - This hook will take care of asynchronous operations in the component by executing a callback on first render and when one of its dependencies changes. This hooks integrates with the Suspense component, allowing to easily handle the loading state of the component.
• useHook - The useHook is a special hook used to create your own advanced hooks. Should only be used if the current hooks are not enough to satisfy your needs.