WebStorageを使用して入力内容をブラウザに保存

src/hooks/use_state_with_storage.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export const useStateWithStorage = (
+  init: string,
+  key: string
+): [string, (s: string) => void] => {
+  const [value, setValue] = useState<string>(localStorage.getItem(key) || init);
+  const setValueWithStrage = (nextValue: string): void => {
+    setValue(nextValue);
+    localStorage.setItem(key, nextValue);
+  };
+  return [value, setValueWithStrage];
+};

src/pages/editor.tsx

@@ -1,12 +1,10 @@
 import { Box, Flex, Textarea } from '@chakra-ui/react';
 import * as React from 'react';
-const { useState } = React;
+import { useStateWithStorage } from '../hooks/use_state_with_storage';
 import { Header } from '../components/header';
 const StorageKey = 'pages/editor:textarea';
 export const Editor: React.FC = () => {
-  const [text, setText] = useState<string>(
-    localStorage.getItem(StorageKey) || ''
-  );
+  const [text, setText] = useStateWithStorage('', StorageKey);
   return (
     <>
       <Header />
@@ -18,7 +16,6 @@ export const Editor: React.FC = () => {
             height='100%'
             variant='flushed'
             p='3'
-            isInvalid
             onChange={(e) => {
               setText(e.target.value);
             }}