React の難しいところ：値を変更したときに影響を及ぼす範囲が広い

最近 React を書いていて、これまで主に書いていた Vue.js よりも難しいな～と思うことが多かった。

何が難しいと感じているのか、その一部を言語化してみた。

難しさを一言で

ここに React の関数コンポーネントを用意。

const AppComponent = (props) => {
  const title = props.values.join(' ')
  const [content, setContent] = useState('')
  const handleChange = (e) => {
    setContent(e.target.value)
  }

  return (
    <section>
      <h1>{title}</h1>
      <textarea onChange={handleChange} value={content}></textarea>
      <p>{content}</p>
    </section>
  )
}

ざっと書いたけど動くのかな？

handleChange の中で setContent を呼んでいる。 ここまでは分かる。 値を変更したいんだな。

で、普通の JavaScript であれば、変数の値を変更したときに影響を及ぼすのは、その変数を参照しているものだけのはずだ。 イメージ的にはこう。

const title = props.values.join(' ')
let content = ''
const handleChange = (e) => {
  content = e.target.value
}

しかし React コンポーネントでは、title にも影響がある。 useState のセッターを呼んだことで、このコンポーネントの再レンダリングが走るからだ。 つまり const title = props.values.join(' ') も再実行される。 ついでに言えば handleChange も再定義され、別のオブジェクトになる。

この動きが、「ただ変数を変更しただけなのに、関係ない別のところにも影響が及んでいる」ように見える。 これが React が難しいと感じていた一つの要因みたいだ。