Expand console by default

Author: gaearon

beta/src/components/MDX/Sandpack/Console.tsx

@@ -45,18 +45,20 @@ 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;
         });
       }
     });
 
     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 = () => {
       </div>
       {isExpanded && (
         <div className="w-full h-full border-y bg-white dark:border-gray-700 dark:bg-gray-95 min-h-[28px] console">
-          <div className="max-h-52 h-auto overflow-auto" ref={wrapperRef}>
+          <div className="max-h-40 h-auto overflow-auto" ref={wrapperRef}>
             {logs.map(({data, id, method}) => {
               return (
                 <div

beta/src/pages/learn/synchronizing-with-effects.md

@@ -233,7 +233,7 @@ By default, Effects run after *every* render. Often, this is **not what you want
 - Sometimes, it's slow. Synchronizing with an external system is not always instant, so you might want to skip doing it unless it's necessary. For example, you don't want to reconnect to the chat server on every keystroke.
 - Sometimes, it's wrong. For example, you don't want to trigger a component fade-in animation on every keystroke. The animation should only play once when the component appears for the first time.
 
-To demonstrate the issue, here is the previous example with a few `console.log` calls and a text input that updates the parent component's state. Open the console and notice how typing causes the Effect to re-run:
+To demonstrate the issue, here is the previous example with a few `console.log` calls and a text input that updates the parent component's state. Notice how typing causes the Effect to re-run:
 
 <Sandpack>
 
@@ -821,8 +821,6 @@ export default function App() {
 
 </Sandpack>
 
-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.