const [fullName, setFullName] = useState('')

useEffect(() => {
  setFullName(`${user.firstName} ${user.lastName}`)
}, [user])

const fullName = `${user.firstName} ${user.lastName}`

const filteredItems = useMemo(() => {
  return items.filter(item => item.active)
}, [items])

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 />}
  </>
);

import { useForm } from "react-hook-form";

export default function MyForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="Email" />
      <input type="submit" />
    </form>
  );
}

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object({
  email: yup.string().email().required(),
}).required();

export default function ValidatedForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register("email")} />
      <p>{errors.email?.message}</p>
      <button type="submit">Отправить</button>
    </form>
  );
}

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

const Parent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <Child onClick={increment} />;
};

const Child = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

// counterContext.tsx
import { createContext, useReducer, useContext, ReactNode } from 'react';

const CounterContext = createContext<any>(null);

const initialState = { count: 0 };

function reducer(state: typeof initialState, action: { type: string }) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export const CounterProvider = ({ children }: { children: ReactNode }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
};

export const useCounter = () => useContext(CounterContext);

// App.tsx
import { CounterProvider, useCounter } from './counterContext';

function Counter() {
  const { state, dispatch } = useCounter();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

export default function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}