React の useEffect は実際には Effect ですか?

リアクション: 私はあなたを選びます

私は 私のスターター ポケモン として React JS を使用して Javascript のフレームワークの世界を探索する独自の旅を始めました。大量の命令型 DOM 操作コードが削減されるため、一目見ただけで私はこれに夢中になりました。私は、状態に基づいて DOM を自動的に操作するフレームワークのアイデアがとても気に入っています。

最初は、カビゴンを重量で倒すことができる React のサイズと消費するメモリを考慮していませんでした。
React を学んだ後、Vue、Angular、Svelte などの多くのフレームワークに出会いました。ようやくSolidJSにたどり着いたとき、目が開かれました

私は、SolidJS の作者である Ryan Carniato のライブ ストリームと記事をフォローし始めました。彼は私のフレームワークに対する見方を完全に変えました。私は Javascript フレームワークの反応性システムを理解し始めました。少し振り返って、私のスターターポケモンの反応とその反応性とレンダリングシステムを見たとき、笑いを抑えることができませんでした

最初から騙されていたような気がします。状態が変わるたびにすべてを再実行する必要があるのはなぜでしょうか?もしそうなら、なぜ副作用として機能する useEffect という名前のフックが本当に必要なのでしょうか。

記事のタイトルに入ります

この記事のタイトルを「React の useEffect は実際にエフェクトですか?」としました。 ベガパンクは政府について人々の目を開きました (OP ファンにネタバレして申し訳ありません) のように React について目を開くことができます。それについて批判する考えはたくさんあります。ということで、今日は真名を隠して一番嘘をついたエフェクトを使う日です。

あなたが初心者であるか、React の初心者に尋ねると、useEffect について

のように説明されるでしょう。

依存関係配列の値が変更されるたびに再実行する関数。

もしあなたがそのような人なら、あなたは間違って教えられているという真実を知ることができて本当に幸運です。 React は何かが変更されるたびに再実行されます。そのため、関数を再実行する必要がないため、関数を再実行する必要はありません。ここでその真相を解説していきます

効果とは実際には何を意味するのでしょうか？

効果とは実際には何を意味するのか説明しましょう。 Reactivity システムでは、Effect は実際には Side Effect と呼ばれます。例から始めましょう

const name = "John Doe"
createEffect(()=>{
    console.log("New name", name)
},[name])

ここで、createEffect 関数は、2 番目の引数の Array の値が変更されるたびに再実行する関数を受け入れます。ここで、createEffect 内の関数は name の 副作用 です。つまり、その関数は状態名に依存します。 name の値が変更されるたびに、副作用が再実行されます。これが副作用の本当の意味です。

React は実際に何をするのでしょうか?

React に関して同じコードを書かせてください

const [name, setName] = useState("John Doe")
useEffect(()=>{
    console.log("New name", name)
},[name])
setName("Jane Doe")

setName が呼び出されるたびに、useEffect が再実行されます。完全にわかります。 useEffect を削除するだけで同等のコードを与えてみましょう。 React の useState がリアクティブ状態を作成しないため、これも機能します

const [name, setName] = useState("John Doe")
console.log("New name", name)
setName("Jane Doe")

TADA! useState から状態を取得するたびに再実行されるため、React では正常に動作します
変化します。 useEffect を説明するために別の例を示します。

const [name, setName] = useState("John Doe")
const [age, setAge] = useState(18)
console.log("New name", name)
setAge(21)

年齢が変更されるたびに、console.log("New name", name) も実行されるようになりましたが、これは私たちが望んでいることではありません。したがって、 useEffect でラップします。

const [name, setName] = useState("John Doe")
const [age, setAge] = useState(18)
useEffect(()=>{
    console.log("New name", name)
},[name])
setName("Jane Doe")

現在は修正されています。したがって、useEffect は実際には実行を妨げていますが、これは Effects とは正反対です。それが実際に何をするのか理解していただければ幸いです。 useEffect についての適切な説明はここです。

useEffect は状態に変化があった場合にのみ実行できるフックです

副作用の説明は似ていますが、コインの反対側のようなものです。
副作用の説明において

副作用は、状態に変化があるたびに実行される関数です

反応性システムでは、エフェクトの再実行とエフェクト以外は何もなく、状態が変化するたびにのみ実行される機能です。

Reactにおいて、Effects rerunsとEffects以外はDependency Array

に変更が無いと実行できないようにする機能です。

最後に、useEffect が実際に何をするのか理解していただければ幸いです。上記の例は、効果が必要ない可能性がある場合のワースト プラクティスとして記載されています。完全にわかります。しかし、それは useEffect を Effect として使用しないことを推奨しているようなものです。

大嘘

次のように説明されています

useEffect は、コンポーネントを外部システムと同期できるようにする React フックです。

I can't totally get it because The Phrase synchronize with external system means

The system's internal state is updated to match the state of the external system.

But in reality, useEffect had nothing to do with that. useSyncExternalStore does works in problem with some quirks ( Really this problem can't be solved 100%. For now , save that for My Another article ).

Just think about this facts that React reruns code whenever state changes and useEffect is commonly used along with React state, Then Why do we need to run something based on a state? because always reruns whenever something changes.

I found a page named as Synchronizing with Effects at React Official Docs which explains about it . At there, They explained that as

Effects let you run some code after rendering so that you can synchronize your component with some system outside of React.

From above lines, It is clear that useEffect lets you write a function which executes after rendering of React. Then WTF it is named as useEffect? Does this had any kind of connection with Effect as it's name implies? It's more similar to window.onload of DOM API.

I still can't digest the example they gave

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

function VideoPlayer({ src, isPlaying }) {
  const ref = useRef(null);

  if (isPlaying) {
    ref.current.play();  // Calling these while rendering isn't allowed.
  } else {
    ref.current.pause(); // Also, this crashes.
  }

  return <video ref={ref} src={src} loop playsInline />;
}

export default function App() {
  const [isPlaying, setIsPlaying] = useState(false);
  return (
    <>
      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <VideoPlayer
        isPlaying={isPlaying}
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      />
    </>
  );
}

Here is the reason the error If You try to run it

Runtime Error
App.js: Cannot read properties of null (reading 'pause') (9:16)

   6 |   if (isPlaying) {
   7 |     ref.current.play();  // Calling these while rendering isn't allowed.
   8 |   } else {
>  9 |     ref.current.pause(); // Also, this crashes.
                       ^
  10 |   }
  11 | 
  12 |   return <video ref={ref} src={src} loop playsInline />;

They told to us wrap it inside useEffect to solve this by

  useEffect(() => {
    if (isPlaying) {
      ref.current.play();
    } else {
      ref.current.pause();
    }
  });

because ref.current is set to null before rendering. But I could solve this by simply changed it to

 if (isPlaying) {
   ref.current?.play();
 } else {
    ref.current?.pause();
 }

If It's that what they willing to do, They it should be named as onMount like Vuejs not useEffect because effects at other library like VueJS, SolidJS really does side effect.

Here is the explanation They connected the above example with synchronisation

In this example, The “external system” you synchronized to React state was the browser media API

Does that really make any sense? I still don't know Why used synchronized here?. Here Browser Media API is available after First Render So Then Why there is a necessary of Effect here? It's a Sick Example for Effect. I never thought They would explain Effect with Example Code.

Another Joke

Effects let you specify side effects that are caused by rendering itself, rather than by a particular event.

It found this under the title What are Effects and how are they different from events? and gave above example code for this. After understanding What React really does in name of Effect and reading My Explanation, Could you connect anything?. They gave explanation of Effect of Reactivity System But They did exactly opposite. This is what I always wanted to express to Others

Final Thoughts

I hope You understand What does Effect means? and What React does in name of Effect?. After thinking All this shits, I finally decided to call useEffect
as usePreventExecution. I knew that name given by me is sick ;-) . But It is nothing when compares to What They stated about it at Official Documentation. If You found any other suitable name, Let me know at Comments.

以上がReact の useEffect は実際には Effect ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。