JavaScript/React/useStateを独自に実装のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
JavaScript/React/useStateを独自に実装へ行く。
- 1 (2021-03-19 (金) 03:42:21)

useStateを独自に実装

 import React from "react";
 import ReactDOM from "react-dom";
 
 let callCount = -1;
 let states = [];
 
 function useState(initialValue) {
   const id = ++callCount;
 
   if (states[id]) return states[id];
 
   const setValue = (newValue) => {
     states[id][0] = newValue;
     reRender();
   };
   let tuple = [initialValue, setValue];
   states.push(tuple);
   return tuple;
 }
 
 const MyComponent = () => {
   const [message, setMessage] = useState("");
   const [error, setError] = useState(false);
   return <div></div>;
 };
 
 const App = () => {
   return (
     <div>
       <MyComponent />
     </div>
   );
 };
 
 function reRender() {
   callCount = -1;
   ReactDOM.render(<App />, document.getElementById("root"));
 }