BugFix: Terminal render too many times causing performance freeze

[hgosansn]

Context

I've detected a performance bottle neck on page load, opened the console and saw this

Before the fix the Terminal tabs would get rendered too many times.

Analysis

I believe using a big function call with many inputs that change often and having a big ass interface defined underneath is an anti pattern to the framework used here, memo.

In React, memoization is a performance optimization technique used to prevent unnecessary re-renders and recomputations. It involves caching the results of expensive function calls or component renders so that if the same inputs (parameters) occur again, the cached result is returned instead of recomputing it.

React provides built-in hooks and higher-order components (HOCs) for memoization:

React.memo: A higher-order component that memoizes functional components.
useMemo: A hook that memoizes the result of a function.
useCallback: A hook that memoizes a callback function.

Solution

Move the terminal and it's 3 tabs to a different component that doesn't rely on inputs allows for better template caching and avoids re renders of this expensive resource.

Proposed changes

• Created a component called "TerminalTabs" in charge of handling terminals and tabs.
  • Moved all code in there without changes
• All terminal related code is in the ./terminal folder

Results

I believe Largest contentfull paint after a prompt is largely improved and so is the total blocking time.

Please let me know what you think of this improvement 🙏🏽