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"));
 }

• コンポーネントの外側にstatesとcallCounterを持っている
• ifの中でuseState()してはいけないのは、reRender()のたびにuseState()したりしなかったりするとstatesの数や順番が変動することになり、reRender()する前のstatesの値と違ってしまうから
• だから、コンポーネント関数の先頭で必要な分だけまとめてuseState()するべき