Works the same way as regular
watch method, excepts it'll automatically stop listening to changes when component unmounts
You can also provide 2nd argument will will force watch to be restarted. It works the same way as 2nd argument in
Use 2nd argument only for values that are not parts of the store.
Creates 'local' version of the store that is memoized between renders.
Sometimes you want to re-render component only for specific sort of store updates.
Let's say we have store with todo list and info about which todo is currently opened
Now we have component responsible for displaying single todo:
In such case - Todo component would re-render very time
openedTodoId is changed, even if it was not opened before and after the change.
We can modify our code:
With this simple change - our component will still check if it is opened now after each
openedTodoId change, but will re-render only if returned value changes.
This hook is useful if we need to provide store value into 3rd party component we cannot wrap with
In such case, if
.usersData changes -
DashboardPanel will not re-render as it is not using it directly.
DashboardPanel will not re-render as well as it is not wrapped with
In such case we can modify our code:
Now, every time any part of
store.usersData is changed,
DashboardPanel will re-render.
Sometimes we want to keep some sort of local state during watching of the store. Let's say we have store:
and we watch it, but we only want to output new information to the console on every 10th change.
We can accomplish it like: