如何监听React组件状态变更且避免触发重渲染？

我有一个复杂的组件结构，现将核心需求简化如下：

父组件SalesOrderLineItems代码如下：

const SalesOrderLineItems = ({
  ...requiredProps,
}) => {
  const [productLines, setProductLines] = useState([])
  const [shippingLines, setShippingLines] = useState([])
  const [totals, setTotals] = useState({})
  const [discounts, setDiscounts] = useState([])

  useEffect(() => {
    // 期望子组件调用setState时触发此逻辑
    console.log('😁 ~ productLines:', productLines)
  }, [productLines])

  const updateProductLines = useCallback((lines) => setProductLines(lines), [])
  const updateShippingLines = useCallback((lines) => setShippingLines(lines), [])
  return (
    <div className="SalesOrderLineItems">
      <SalesOrderProductLines
        updateProductLines={updateProductLines} 
        {...otherProps} />
      <SalesOrderShippingLines
        updateShippingLines={updateShippingLines}
        productLines={productLines} // 仅用于计算，不参与渲染
        {...otherProps}
      />
      <SalesOrderDiscounts
        discounts={discounts}
        {...otherProps}
      />
      <SalesOrderTotals
        totals={totals}
        {...otherProps}
      />
    </div>
  )
}
export default SalesOrderLineItems

在子组件SalesOrderProductLines中，我使用React Hook Form的watch方法，通过传入的props更新productLines：

useEffect(() => {
    const subscription = watch((value, { name, type }) => {
      // 业务逻辑处理
      updateProductLines(value.lines)
      console.log('😁 ~ lines updated:', value.lines) // 此处可打印最新值，确认状态更新生效
    })
    return () => subscription.unsubscribe()
  }, [watch])

目前的问题是：子组件中能确认productLines已更新，但父组件中监听productLines的useEffect并未执行。我推测是因为使用了非受控输入，没有触发组件重渲染导致的。

我需要实现的是：不触发组件重渲染的前提下，监听productLines的变化，仅基于最新的productLines、shippingLines和discounts计算并更新totals，以此保证性能。

内容的提问来源于stack exchange，提问作者Mr.Online