Avoid Unnecessary Re-rendering

src/components/Content.tsx

@@ -136,4 +136,4 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
   );
 };
 
-export default LearnContent;
+export default React.memo(LearnContent);

src/components/Navbar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Menu, Dropdown, Button, Image, Grid } from "antd";
 import { useSpring, animated } from "react-spring";
 import { useLocation, Link } from "react-router-dom";
@@ -325,4 +325,4 @@ function Navbar({ scrollToFooter }: NavbarProps) {
   );
 }
 
-export default Navbar;
+export default React.memo(Navbar);

src/components/ResizableContainer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import useAppStore from '../store/store';
 
 interface ResizableContainerProps {
@@ -116,4 +116,4 @@ const ResizableContainer: React.FC<ResizableContainerProps> = ({
   );
 };
 
-export default ResizableContainer;
+export default React.memo(ResizableContainer);

src/components/SampleDropdown.tsx

@@ -1,6 +1,6 @@
 import { Button, Dropdown, Space, message, MenuProps } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-import { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import useAppStore from "../store/store";
 import { shallow } from "zustand/shallow";
 import { useStoreWithEqualityFn } from "zustand/traditional";
@@ -62,4 +62,4 @@ function SampleDropdown({
   );
 }
 
-export default SampleDropdown;
+export default React.memo(SampleDropdown);

src/components/Sidebar.tsx

@@ -50,4 +50,4 @@ const Sidebar: React.FC<SidebarProps> = ({ steps }) => {
   );
 };
 
-export default Sidebar;
+export default React.memo(Sidebar);