From 007fe552001012a550b942e2456a3a317c115d17 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 14 Jun 2022 11:14:04 +0100 Subject: [PATCH] Expand console by default --- beta/src/components/MDX/Sandpack/Console.tsx | 14 ++++++++------ beta/src/pages/learn/synchronizing-with-effects.md | 4 +--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/beta/src/components/MDX/Sandpack/Console.tsx b/beta/src/components/MDX/Sandpack/Console.tsx index 4b5f31e3..b17bdfb3 100644 --- a/beta/src/components/MDX/Sandpack/Console.tsx +++ b/beta/src/components/MDX/Sandpack/Console.tsx @@ -45,10 +45,12 @@ export const SandpackConsole = () => { } if (message.type === 'console' && message.codesandbox) { setLogs((prev) => { - const messages = [...prev, ...message.log]; - messages.slice(Math.max(0, messages.length - MAX_MESSAGE_COUNT)); - - return messages.filter(({method}) => method === 'log'); + const newLogs = message.log.filter(({method}) => method === 'log'); + let messages = [...prev, ...newLogs]; + while (messages.length > MAX_MESSAGE_COUNT) { + messages.shift(); + } + return messages; }); } }); @@ -56,7 +58,7 @@ export const SandpackConsole = () => { return unsubscribe; }, [listen]); - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = React.useState(true); React.useEffect(() => { if (wrapperRef.current) { @@ -99,7 +101,7 @@ export const SandpackConsole = () => { {isExpanded && (
-
+
{logs.map(({data, id, method}) => { return (
@@ -821,8 +821,6 @@ export default function App() { -Expand the console panel in the sandbox above. - You will see three logs at first: `Schedule "a" log`, `Cancel "a" log`, and `Schedule "a" log` again. Three second later there will also be a log saying `a`. As you learned earlier on this page, the extra schedule/cancel pair is because **React remounts the component once in development to verify that you've implemented cleanup well.** Now edit the input to say `abc`. If you do it fast enough, you'll see `Schedule "ab" log` immediately followed by `Cancel "ab" log` and `Schedule "abc" log`. **React always cleans up the previous render's Effect before the next render's Effect.** This is why even if you type into the input fast, there is at most one timeout scheduled at a time. Edit the input a few times and watch the console to get a feel for how Effects get cleaned up.