Разница между useRefи useStateзаключается в том, что в React они служат разным целям.

1. useState: это встроенный хук React, используемый для управления состоянием функциональных компонентов. Он позволяет вам объявлять и обновлять переменные состояния. Когда изменяется переменная состояния, React повторно отображает компонент, чтобы отразить обновленное состояние. Хук useStateвозвращает массив с двумя элементами: значением текущего состояния и функцией для обновления этого значения.

Пример использования useState:

import React, { useState } from 'react';
const ExampleComponent = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

2. useRef: этот хук в основном используется для доступа к элементам DOM и управления ими, а также для сохранения значения при рендеринге компонента. Значение, хранящееся в объекте useRef, сохраняется между рендерингами и не вызывает повторный рендеринг при его изменении. Он обычно используется для доступа к входным значениям, фокусировки элементов или хранения изменяемых значений.

Пример использования useRef:

import React, { useRef } from 'react';
const ExampleComponent = () => {
  const inputRef = useRef();
  const focusInput = () => {
    inputRef.current.focus();
  };
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};