// именованный экспорт
export const a = 1

// export list
const c = 3
const d = 4
const f = 5

export {
 c,
 d,
 f
}

// стандартный экспорт
const b = 2
export default b

import { 
 Status, 
 getUser, 
 render as renderFunction
} from './file'

import React from 'react'

import React, { useState, useMemo } from 'react'

import Angular from 'react' // абсолютно валидно

import { Status as UserStatus } from './file'

const items = [1, 2, 3, 4];
const itemRefs: React.RefObject<HTMLDivElement>[] = items.map(() =>
  useRef(null),
);

// и далее в вёрстке
ref={itemRefs[index]}

// вынести из компонента
const items = [1, 2, 3, 4];

// внутри компонента
const itemRefs = useRef([])

// и внутри вёрстки
// index берется из .map, так как элементы на 
// страницу вставляются из списка
ref={element = inputRef.current[index] = element}

const Parent = () => {
 const foo = useCallback(() => {
  
 }, [])
 
 return <Component foo={foo} />
}

const Component = (props) => { ... }

const Component = memo((props) => { ... })

const Component = () => {
 const foo = useCallback(() => {
  
 }, [])
 
 return <button onClick={() => foo()} />
}

www.site.com/?name=progway

const [name, setName] = useQueryState("name");
const [surname, setSurname] = useQueryState("surname", "Putnov");

type QueryValue = string | undefined;

function useQueryState<I extends QueryValue>(
  queryKey: string,
  defaultValue?: I,
) {
 // тело хука
}

const [searchParams, setSearchParams] = useSearchParams();

const [state, setState] = useState<QueryValue>(() => {
  const targetValue = searchParams.get(queryKey);

  if (targetValue !== null) {
    return targetValue;
  }

  return defaultValue;
});

useLayoutEffect(() => {
  setSearchParams((prev) => {
    if (state) {
      prev.set(queryKey, state);
    } else {
      prev.delete(queryKey);
    }
    return prev;
  });
}, [state, queryKey, setSearchParams]);

Я очень рекомендую TanStack Virtual для этой задачи. Мне уже удалось применить его на нескольких проектах и никаких проблем он не вызывал

const states = [
  { title: "Мессенджер", icon: Favicon1 },
  { title: "Новое сообщение", icon: Favicon2 },
]

const [stateIndex, setStateIndex] = useState(0);

// раз в секунду переходим на следующее состояние
useEffect(() => {
  const intervalId = setInterval(() => {
    setStateIndex((prevIndex) => (prevIndex + 1) % states.length);
  }, 1000);

  return () => clearInterval(intervalId);
}, []);

useEffect(() => {
  const link = document.querySelector("link[rel~='icon']");
  const title = document.querySelector("head title");

  if (link) {
    link.href = states[stateIndex].icon;
    title.textContent = states[stateIndex].title;
  }
}, [stateIndex]);

Смысл этого паттерна заключается в том, что мы можем связать компоненты общим окружением и эффективнее использовать их вместе

То есть мы можем заранее объединить компоненты каким-то контекстом и переиспользовать их, например, через общее пространство имён, в качестве которого чаще всего выступает родительский компонент

import { Layout } from 'antd';

<Layout>
    <Layout.Header>Header</Layout.Header>
    <Layout.Content>Content</Layout.Content>
    <Layout.Footer>Footer</Layout.Footer>
</Layout>

InternalLayout  
└ LayoutContext <-- инициализируем контекст
   ├ Header
   ├ Content <-- а в этих компонентах получаем его значение
   ├ Footer
   └ Sider

import InternalLayout, { Content, Footer, Header } from './layout';
import Sider from './Sider';

// получаем тип базового layout компонента
type InternalLayoutType = typeof InternalLayout;

// создаём тип, который определит какие компоненты мы вложим в layout
type CompoundedComponent = InternalLayoutType & {
  Header: typeof Header;
  Footer: typeof Footer;
  Content: typeof Content;
  Sider: typeof Sider;
};

// нагло переприсваиваем тип
const Layout = InternalLayout as CompoundedComponent;

// нагло биндим нужные компоненты
Layout.Header = Header;
Layout.Footer = Footer;
Layout.Content = Content;
Layout.Sider = Sider;

// не менее нагло экспортируем как public-api
export default Layout;