Merge branch 'dai-shi-update-jotai'

Author: krausest

frameworks/keyed/jotai/package-lock.json

@@ -22,9 +22,9 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
+    "jotai": "1.3.3",
     "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "jotai": "1.0.0"
+    "react-dom": "17.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",

frameworks/keyed/jotai/package.json

@@ -15,7 +15,6 @@ const createRowsAtom = atom(null, (_, set, amount: number) => {
 
 const appendRowsAtom = atom(null, (_, set) => {
   set(dataAtom, (data) => data.concat(buildDataAtoms(1000)));
-  set(selectedAtom, null);
 });
 
 const updateRowsAtom = atom(null, (get, set) => {
@@ -32,7 +31,15 @@ const removeRowAtom = atom(null, (_, set, item: PrimitiveAtom<Data>) =>
   })
 );
 
-const selectRowAtom = atom(null, (_, set, selected: PrimitiveAtom<Data>) => {
+const selectRowAtom = atom(null, (get, set, selected: PrimitiveAtom<Data>) => {
+  const prevSelected = get(selectedAtom);
+  if (prevSelected === selected) {
+    return;
+  }
+  if (prevSelected) {
+    set(prevSelected, (prev) => ({ ...prev, isSelected: false }))
+  }
+  set(selected, (prev) => ({ ...prev, isSelected: true }))
   set(selectedAtom, selected);
 });
 
@@ -54,11 +61,10 @@ const GlyphIcon = (
 
 interface RowProps {
   item: PrimitiveAtom<Data>;
-  isSelected: boolean;
 }
 
-const Row = memo<RowProps>(({ item, isSelected }) => {
-  const [{ id, label }] = useAtom(item);
+const Row = memo<RowProps>(({ item }) => {
+  const [{ id, label, isSelected }] = useAtom(item);
   const selectRow = useUpdateAtom(selectRowAtom);
   const removeRow = useUpdateAtom(removeRowAtom);
   return (
@@ -78,14 +84,12 @@ const Row = memo<RowProps>(({ item, isSelected }) => {
 
 const RowList = memo(() => {
   const [data] = useAtom(dataAtom);
-  const [selected] = useAtom(selectedAtom);
   return (
     <>
       {data.map((item) => (
         <Row
           key={String(item)}
           item={item}
-          isSelected={item === selected}
         />
       ))}
     </>

frameworks/keyed/jotai/src/main.tsx

@@ -13,16 +13,17 @@ let nextId = 1;
 export interface Data {
   id: number;
   label: string;
+  isSelected?: boolean;
 }
 
 export function buildDataAtoms(count: number): PrimitiveAtom<Data>[] {
   const data = new Array(count);
   for (let i = 0; i < count; i++) {
     data[i] = atom({
-    id: nextId++,
-    label: `${A[random(A.length)]} ${C[random(C.length)]} ${
-      N[random(N.length)]
-    }`,
+      id: nextId++,
+      label: `${A[random(A.length)]} ${C[random(C.length)]} ${
+        N[random(N.length)]
+      }`,
     });
   }
   return data;