From 51e259ee099f7b2227a5927756f4f27950af504d Mon Sep 17 00:00:00 2001
From: Eduardo Roth <eduardo@eduardoroth.dev>
Date: Fri, 5 Nov 2021 16:14:21 -0600
Subject: [PATCH] feat(): add topic about using component state from ngrx

---
 content/ngrx/use-component-state.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 content/ngrx/use-component-state.md

diff --git a/content/ngrx/use-component-state.md b/content/ngrx/use-component-state.md
new file mode 100644
index 0000000..e481d79
--- /dev/null
+++ b/content/ngrx/use-component-state.md
@@ -0,0 +1,21 @@
+---
+title: use component state
+---
+
+# Problem
+
+Sometimes you'll need to handle component state, but it shouldn't be added to the global state because:
+1) It'd bloat the global state
+2) Specific state or UI state should belong to the component (like showing a previously hidden form when editing an item, this is something that should belong to the component state and not the global one)
+
+# Solution
+
+You can use NgRx component store package [@ngrx/component-store](https://ngrx.io/guide/component-store) which allows to have a component store for all the state requirements of the specific component you have.
+
+**Key Concepts from the NgRx docs:**
+
+- Local state has to be initialized, but it can be done lazily.
+- Local state is typically tied to the life-cycle of a particular component and is cleaned up when that component is destroyed.
+- Users of ComponentStore can update the state through setState or updater, either imperatively or by providing an Observable.
+- Users of ComponentStore can read the state through select or a top-level state$. Selectors are very performant.
+- Users of ComponentStore may start side-effects with effect, both sync and async, and feed the data both imperatively or reactively.