From ab3e498da3f34a97a996d4a0a825173e10674c84 Mon Sep 17 00:00:00 2001 From: Mike Ratcliffe Date: Sat, 12 Oct 2024 19:57:43 +0100 Subject: [PATCH 1/3] fix(instructions): react-hooks 02.01 Exercise `react-hooks/exercises/02.side-effects/01.problem.effects/index.tsx` The current instructions don't make sense... this patch clears things up. --- exercises/02.side-effects/01.problem.effects/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/exercises/02.side-effects/01.problem.effects/index.tsx b/exercises/02.side-effects/01.problem.effects/index.tsx index f6b2315e6..760cd8c8e 100644 --- a/exercises/02.side-effects/01.problem.effects/index.tsx +++ b/exercises/02.side-effects/01.problem.effects/index.tsx @@ -18,7 +18,8 @@ function App() { const caterpillarChecked = words.includes('caterpillar') // 🐨 add a useEffect(() => {}, []) call here (we'll talk about that empty array later) - // 🐨 in the useEffect callback, subscribe to window's popstate event + // 🐨 in the useEffect call, subscribe to window's popstate event + // 🐨 in the useEffect callback, unsubscribe from window's popstate event // 🐨 your event handler should call setQuery to getQueryParam() // 📜 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener From 461b93c28fd790dbcedf82ae966325ce2e68f9de Mon Sep 17 00:00:00 2001 From: Mike Ratcliffe Date: Sat, 12 Oct 2024 21:42:24 +0100 Subject: [PATCH 2/3] fix(instructions): Explain that react-hooks 02.01 should be broken > in the useEffect callback, subscribe to window's popstate event If a dev knows how to use `useEffect()` this will look like a bug... because it is. Let's explain that this bug is supposed to be here at this point. --- exercises/02.side-effects/01.problem.effects/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/exercises/02.side-effects/01.problem.effects/index.tsx b/exercises/02.side-effects/01.problem.effects/index.tsx index 760cd8c8e..58247df26 100644 --- a/exercises/02.side-effects/01.problem.effects/index.tsx +++ b/exercises/02.side-effects/01.problem.effects/index.tsx @@ -18,8 +18,8 @@ function App() { const caterpillarChecked = words.includes('caterpillar') // 🐨 add a useEffect(() => {}, []) call here (we'll talk about that empty array later) - // 🐨 in the useEffect call, subscribe to window's popstate event - // 🐨 in the useEffect callback, unsubscribe from window's popstate event + // 🐨 in the useEffect callback, subscribe to window's popstate event + // 🐨 if that doesn't make sense to you... don't worry, it's supposed to be broken! // 🐨 your event handler should call setQuery to getQueryParam() // 📜 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener From d05b52d85b3880681064c4ce645f6b5f16c9229f Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Sat, 12 Oct 2024 15:57:07 -0600 Subject: [PATCH 3/3] Apply suggestions from code review --- exercises/02.side-effects/01.problem.effects/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/02.side-effects/01.problem.effects/index.tsx b/exercises/02.side-effects/01.problem.effects/index.tsx index 58247df26..6aba1805b 100644 --- a/exercises/02.side-effects/01.problem.effects/index.tsx +++ b/exercises/02.side-effects/01.problem.effects/index.tsx @@ -19,7 +19,7 @@ function App() { // 🐨 add a useEffect(() => {}, []) call here (we'll talk about that empty array later) // 🐨 in the useEffect callback, subscribe to window's popstate event - // 🐨 if that doesn't make sense to you... don't worry, it's supposed to be broken! + // 🦉 if that doesn't make sense to you... don't worry, it's supposed to be broken! We'll fix it next // 🐨 your event handler should call setQuery to getQueryParam() // 📜 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener