Begin with a value someone can change

A writable signal represents a value that the feature owns and can update. Think of a selected category or search query in a portfolio directory. Reading the signal through its getter participates in Angular’s reactive tracking. Start with this small relationship before attempting a global state architecture; the useful question is which part of the feature owns each decision.

Derive the visible collection

Suppose projects is a source collection and query is a writable signal. A computed value can filter the projects using the current query, and another display can read the resulting count. The count does not need independent writable state. Keeping derived information computed avoids synchronization code whose only job is copying one reactive value into another after each edit.

Update values through a clear operation

Use set when assigning a replacement value and update when calculating a new value from the previous one. For an object or array, prefer a deliberate replacement for a changed branch rather than hidden deep mutation. Exposing a readonly signal prevents consumers from calling its writable methods, but it does not automatically make a nested object deeply immutable. Data ownership still needs a contract.

Understand dependency changes

Computed relationships track the signals read during a derivation. A branch that does not read a particular signal may not depend on it for that evaluation. This can be useful, but it should remain understandable from the function. Avoid side effects inside a computed value; a derivation should describe a result, not start a request or change another piece of source state unexpectedly.

Reserve effects for external coordination

A browser storage write, logging integration or nonreactive widget may need synchronization outside the calculated view. That is a different responsibility from computing a filtered array. Avoid chains of effects that shuttle values around because they make the direction of change harder to follow. Keep the source-to-derived relationship explicit, and use the framework’s current lifecycle guidance for resource cleanup.

Verify the dependency story

Change the query, replace the collection and toggle branches that enable or disable a derived view. Confirm that the displayed count and rows agree. Test object updates without relying on incidental unrelated renders. Review which values are writable and why. A small reactive model is successful when another developer can trace an edit to its visible consequences without searching for hidden synchronization loops.

Further reading

Put the idea to work.

Explore free browser tools for images, text and developer workflows.

Try a free tool