带有状态和onChange的React useMemo依赖循环

const memoizedValue = useMemo(() => {
  // 计算逻辑
}, [/* 其他依赖项，不包括状态变量 */]);

const [state, setState] = useState(initialState);

useEffect(() => {
  // 状态变化时的操作
}, [state]);

const memoizedValue = useMemo(() => {
  // 计算逻辑
}, [/* 其他依赖项 */]);

function ParentComponent() {
  const [state, setState] = useState(initialState);

  return <ChildComponent state={state} onChange={handleChange} />;
}

function ChildComponent({ state, onChange }) {
  const memoizedValue = useMemo(() => {
    // 计算逻辑
  }, [/* 其他依赖项 */]);

  // 使用 memoizedValue 和处理 onChange
}

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

function MyComponent() {
  const [inputValue, setInputValue] = useState('');

  // 使用 useEffect 来响应 inputValue 的变化
  useEffect(() => {
    console.log('Input value changed:', inputValue);
  }, [inputValue]);

  // useMemo 不依赖于 inputValue
  const memoizedResult = useMemo(() => {
    // 这里是一些复杂的计算
    return inputValue.toUpperCase();
  }, [/* 其他依赖项，不包括 inputValue */]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <p>Memoized Result: {memoizedResult}</p>
    </div>
  );
}

export default MyComponent;