mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00

Files

T

Samuel Degueldre 4c77132ae2 [IMP] component: only useState on props that are already reactive

Previously, components would automatically call useState on their props,
so that changes deeply within props would automatically cause the
component to be rendered. This can be useful when passing a piece of
state to children or descendants.

One problem with this is that all props implicitly become reactive, even
if the object that was passed as a props was not. The problem with that
being that since the original object is not reactive, any change made by
the parent will not go through the reactivity system and the children
won't be notified of the change, in essence, this reactive object is
essentially useless, while having a real cost: traversing reactive
objects creates more reactive objects, and those objects are all
proxies. This is expensive for basically no benefit, while also making
it more difficult to debug code that involves those objects.

This commit fixes that by only calling useState on objects that are
already reactive, allowing the usecase described in the first paragraph
without the drawbacks described in the second.

2022-05-18 08:46:27 +02:00

learning

[FIX] doc: fix minor errors in todo app tutorial

2022-03-25 10:34:00 +01:00

miscellaneous

[DOC] add explanation on structure of compiled template

2022-03-01 15:46:09 +01:00

reference

[IMP] component: only useState on props that are already reactive

2022-05-18 08:46:27 +02:00

readme.md

[IMP] hooks: introduce useChildSubEnv and change useSubEnv

2022-02-11 10:46:44 +01:00

readme.md

🦉 Owl overview 🦉

Here is a list of everything exported by the Owl library:

Main entities:

App: represent an Owl application (mainly a root component,a set of templates, and a config)
Component: the main class to define a concrete Owl component
mount: main entry point for most application: mount a component to a target
xml: helper to define an inline template

Reactivity

useState: create a reactive object (hook, linked to a specific component)
reactive: create a reactive object (not linked to any component)
markRaw: mark an object or array so that it is ignored by the reactivity system
toRaw: given a reactive objet, return the raw (non reactive) underlying object

Lifecycle hooks:

onWillStart: hook to define asynchronous code that should be executed before component is rendered
onMounted: hook to define code that should be executed when component is mounted
onWillPatch: hook to define code that should be executed before component is patched
onWillUpdateProps: hook to define code that should be executed before component is updated
onPatched: hook to define code that should be executed when component is patched
onWillRender: hook to define code that should be executed before component is rendered
onRendered: hook to define code that should be executed after component is rendered
onWillUnmount: hook to define code that should be executed before component is unmounted
onWillDestroy: hook to define code that should be executed before component is destroyed
onError: hook to define a Owl error handler

Other hooks:

useComponent: return a reference to the current component (useful to create derived hooks)
useEffect: define an effect with its dependencies
useEnv: return a reference to the current env
useExternalListener: add a listener outside of a component DOM
useRef: get an object representing a reference (t-ref)
useChildSubEnv: extend the current env with additional information (for child components)
useSubEnv: extend the current env with additional information (for current component and child components)

Utility/helpers:

EventBus: a simple event bus
loadFile: an helper to load a file from the server
markup: utility function to define strings that represent html (should not be escaped)
status: utility function to get the status of a component (new, mounted or destroyed)
whenReady: utility function to execute code when DOM is ready