تغییر کدها در React 19

npm install react@beta react-dom@beta

const [number, setNumber] = useState(0);

const square = useMemo(() => {
  return number * number;
}, [number]);

return (
  <div>
    <p>Number: {number}</p>
    <p>Square: {square}</p>
    <button onClick={() => setNumber(number + 1)}>Increment</button>
  </div>
);

const [number, setNumber] = useState(0);

const square = number * number;

return (
  <div>
    <p>Number: {number}</p>
    <p>Square: {square}</p>
    <button onClick={() => setNumber(number + 1)}>Increment</button>
  </div>
);

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

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

return (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
  </div>
);

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

const increment = ()=> setCount(count + 1);

return (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
  </div>
);

const ChildComponent = forwardRef((props, ref) => {
  return <div ref={ref}>Hello from Child Component!</div>;
});

const ParentComponent = () => {
  const childRef = React.useRef(null);

  const focusChild = () => {
    childRef.current.focus();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={focusChild}>Focus Child</button>
    </div>
  );
};

const ChildComponent = ({props, ref}) => {
  return <div ref={ref} {...props}>Hello from Child Component!</div>;
};

const ParentComponent = () => {
  const childRef = React.useRef(null);

  const focusChild = () => {
    childRef.current.focus();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={focusChild}>Focus Child</button>
    </div>
  );
};

function Book(){
    const [book, setBook] = useState(null)

    async function fetchBook(){
        const res = await fetch('https://book.example/apli/list/1')
        return res.json()
    }

    useEffect(()=>{
        fetchBook().then(data=>setBook(data))
    },[])

    if(!book){
        return <p>Loading ...</p>
    }

    return <p>{book.name}</p>
}

function Book(){

    async function fetchBook(){
        const res = await fetch('https://book.example/apli/list/1')
        return res.json()
    }

    const book = use(fetchBook());
    
    return <p>{book.name}</p>
}

const ThemeContext = createContext('light');

const useTheme = () => useContext(ThemeContext);

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => setTheme((prevTheme) => (prevTheme === 'light'? 'dark' : 'light'));

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemeContext = createContext('light');

const useTheme = () => use(ThemeContext);

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => setTheme((prevTheme) => (prevTheme === 'light'? 'dark' : 'light'));

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};