Skip to content

Commit 1e2063d

Browse files
committed
docs: clarify cache calculation challenge wording
Signed-off-by: Sebastian Legarraga <64795732+slegarraga@users.noreply.github.com>
1 parent c7d6b70 commit 1e2063d

1 file changed

Lines changed: 3 additions & 3 deletions

File tree

src/content/learn/you-might-not-need-an-effect.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1012,7 +1012,7 @@ input { margin-top: 10px; }
10121012
10131013
In this example, filtering the todos was extracted into a separate function called `getVisibleTodos()`. This function contains a `console.log()` call inside of it which helps you notice when it's being called. Toggle "Show only active todos" and notice that it causes `getVisibleTodos()` to re-run. This is expected because visible todos change when you toggle which ones to display.
10141014
1015-
Your task is to remove the Effect that recomputes the `visibleTodos` list in the `TodoList` component. However, you need to make sure that `getVisibleTodos()` does *not* re-run (and so does not print any logs) when you type into the input.
1015+
Your task is to remove the Effect that recomputes the `visibleTodos` list in the `TodoList` component. The Effect currently runs after render and stores the result in state. Replace it with a way to compute the same result during render while preserving the current caching behavior: `getVisibleTodos()` should *not* re-run (and so should not print any logs) when you type into the input.
10161016
10171017
<Hint>
10181018
@@ -1183,7 +1183,7 @@ input { margin-top: 10px; }
11831183
11841184
</Sandpack>
11851185
1186-
With this change, `getVisibleTodos()` will be called only if `todos` or `showActive` change. Typing into the input only changes the `text` state variable, so it does not trigger a call to `getVisibleTodos()`.
1186+
This change keeps the same caching behavior as the Effect version: `getVisibleTodos()` is called only if `todos` or `showActive` change, and typing into the input does not trigger a call to it. The difference is that `visibleTodos` is now computed during render instead of after render in an Effect.
11871187
11881188
There is also another solution which does not need `useMemo`. Since the `text` state variable can't possibly affect the list of todos, you can extract the `NewTodo` form into a separate component, and move the `text` state variable inside of it:
11891189
@@ -1272,7 +1272,7 @@ input { margin-top: 10px; }
12721272
12731273
</Sandpack>
12741274
1275-
This approach satisfies the requirements too. When you type into the input, only the `text` state variable updates. Since the `text` state variable is in the child `NewTodo` component, the parent `TodoList` component won't get re-rendered. This is why `getVisibleTodos()` doesn't get called when you type. (It would still be called if the `TodoList` re-renders for another reason.)
1275+
This approach also keeps the caching behavior from the Effect version. When you type into the input, only the `text` state variable updates. Since the `text` state variable is in the child `NewTodo` component, the parent `TodoList` component won't get re-rendered. This is why `getVisibleTodos()` still doesn't get called when you type. (It would still be called if the `TodoList` re-renders for another reason.)
12761276
12771277
</Solution>
12781278

0 commit comments

Comments
 (0)