const inputRef = useRef(null);
useEffect(() => {
  inputRef.current?.focus();
}, []);
return <input ref={inputRef} />;

const ref = useRef(0);
ref.current += 1; // לא יגרום לרינדור

const [value, setValue] = useState(0);
const prevRef = useRef(value);
useEffect(() => { prevRef.current = value; }, [value]);

const boxRef = useRef(null);
const [rect, setRect] = useState({});
useEffect(() => {
  const el = boxRef.current;
  if (!el) return;
  const update = () => setRect(el.getBoundingClientRect());
  update();
  const ro = new ResizeObserver(update);
  ro.observe(el);
  return () => ro.disconnect();
}, []);

const idRef = useRef(null);
const start = () => {
  if (idRef.current) return;
  idRef.current = setInterval(doSomething, 1000);
};
const stop = () => {
  clearInterval(idRef.current);
  idRef.current = null;
};

import { useEffect, useRef, useState } from 'react';

const UseRefBasics = () => {
  const [value, setValue] = useState(0);
  const refContainer = useRef(null);
  const isMounted = useRef(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(refContainer.current);         // מצביע לקלט
    const name = refContainer.current.value;   // קריאת ערך מה- input
    console.log(name);
  };

  useEffect(() => {
    // הפוקוס על הקלט בעת mount
    refContainer.current.focus();
  }, []);

  useEffect(() => {
    // דילוג על הריצה הראשונה
    if (!isMounted.current) {
      isMounted.current = true;
      return;
    }
    console.log('re-render'); // ירוץ רק בעדכונים
  }, [value]);

  return (
    <div>
      <form className='form' onSubmit={handleSubmit}>
        <div className='form-row'>
          <label htmlFor='name' className='form-label'>Name</label>
          <input type='text' id='name' ref={refContainer} className='form-input' />
        </div>
        <button type='submit' className='btn btn-block'>submit</button>
      </form>

      <h1>value : {value}</h1>
      <button onClick={() => setValue(value + 1)} className='btn'>increase</button>
    </div>
  );
};

export default UseRefBasics;

// דוגמת קישורים חיצוניים ידידותיים ל-SEO:
<p>
  קראו את
  {' '}
  <a
    href="https://react.dev/reference/react/useRef"
    target="_blank"
    rel="noopener noreferrer"
  >
    התיעוד הרשמי של React על useRef
  </a>
  {' '}וגם את
  {' '}
  <a
    href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver"
    target="_blank"
    rel="noopener noreferrer"
  >
    מדריך MDN על ResizeObserver
  </a>
  .
</p>