const OptimizedComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

const value = useMemo(() => ({ user, logout }), [user]);  

const [name, setName] = useState("");  
const [age, setAge] = useState(0);

const LazyComponent = React.lazy(() => import("./BigComponent"));

import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={items.length} itemSize={35}>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</List>;

const Profile = ({ user }) => {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
      <button>Follow</button>
    </div>
  );
};

const Avatar = ({ src, alt }) => <img src={src} alt={alt} />;
const UserInfo = ({ name, bio }) => (
  <>
    <h2>{name}</h2>
    <p>{bio}</p>
  </>
);
const FollowButton = () => <button>Follow</button>;

const Profile = ({ user }) => (
  <div>
    <Avatar src={user.avatar} alt={user.name} />
    <UserInfo name={user.name} bio={user.bio} />
    <FollowButton />
  </div>
);

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []);

useEffect(() => {
  fetchData();
}, []);

useEffect(() => {
  fetchData();
}, [fetchData]);

const expensiveCalculation = useMemo(() => {
  return someHeavyFunction(data);
}, [data]); // Пересчитается только при изменении data

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []); // Функция не будет пересоздаваться при каждом ререндере

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(c), [c]);

// components/index.ts
export { default as Button } from './Button';
export { default as Input } from './Input';

import { Button, Input } from '@/components';

<MyComponent name={name} age={age} isAdmin={isAdmin} />

<MyComponent user={{ name, age, isAdmin }} />

const userName = useContext(UserContext).name; // Изменение других данных в контексте НЕ вызовет перерисовку

const LazyComponent = lazy(() => import('./HeavyComponent'));

type Theme = "light" | "dark";

const config = {
  theme: "light",
  debug: true,
} satisfies { theme: Theme; debug: boolean };

// Теперь TypeScript гарантирует, что `theme` всегда будет соответствовать "light" | "dark"

const user = {
  name: "Jhon",
  age: 30,
};

type UserKeys = keyof typeof user; // "name" | "age"

const key: UserKeys = "name"; // ✅ TypeScript гарантирует, что это корректный ключ

type EventType = "click" | "hover" | "scroll";
type MouseEvents = Extract<EventType, "click" | "hover">; // "click" | "hover"
type NonMouseEvents = Exclude<EventType, "click" | "hover">; // "scroll"

const roles = ["admin", "user", "guest"] as const;

type Role = (typeof roles)[number]; // "admin" | "user" | "guest"

function getUser() {
  return { name: "Jhon", age: 30 };
}

type User = ReturnType<typeof getUser>; // { name: string; age: number }

const MyComponent = React.memo(({ count }: { count: number }) => {
  console.log('Ререндер!');
  return <div>Count: {count}</div>;
});

const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []);

const expensiveValue = useMemo(() => {
  return calculateHeavyStuff(data);
}, [data]);

import { useState, useEffect } from "react";

function useDelayedLoader(isLoading: boolean, delay = 300) {
  const [showLoader, setShowLoader] = useState(false);

  useEffect(() => {
    let timeout: ReturnType<typeof setTimeout>;

    if (isLoading) {
      timeout = setTimeout(() => setShowLoader(true), delay);
    } else {
      setShowLoader(false);
    }

    return () => clearTimeout(timeout);
  }, [isLoading, delay]);

  return showLoader;
}

const isLoading = ...; // например, из useQuery или useState
const showLoader = useDelayedLoader(isLoading);

return (
  <>
    {showLoader && <Spinner />}
    {!isLoading && <Content />}
  </>
);