fix: #95 Re-render on iOS after reordering (#97)

This fixes a regression from #85 which introduced badly-rendered lists
in iOS on subsequent drags. #85, funny enough, was trying to fix #76.

The core cause of this was that `inReorderingRef` was inconsistent
between renders right after reordering, triggered by `reset()`. We now
update the ref prior to the reset. Issue would only reproduce on device,
and only in more complicated apps than `/example` (I suspect because of
re-rendering speeds).

Also figured out we don't need to change keys on the items as long as we
made this change. All in all, seems to work better.

Tested on iOS device by integrating into a more complicated app, and on
Android simulator.

Author: fivecar

src/index.tsx

@@ -128,6 +128,8 @@ function DragListImpl<T>(
   );
   const reorderRef = useRef(props.onReordered);
   reorderRef.current = useMemo(() => props.onReordered, [props.onReordered]);
+  const keyExtractorRef = useRef(keyExtractor);
+  keyExtractorRef.current = useMemo(() => keyExtractor, [keyExtractor]);
 
   // #76 When we finalize a reordering (i.e. when our parent gets `onReordered`), we need to
   // insulate ourselves from the parent changing the data we render without us controlling the
@@ -160,20 +162,6 @@ function DragListImpl<T>(
     [pan]
   );
 
-  // #76 - Add indirection to keyExtractor to change keys during reordering. Because native
-  // implementations can/do recycle views at times, you need to deliberately rekey things during
-  // reordering so the native implementation respects your new positions/styles/settings.
-  const keyExtractorRef = useRef(keyExtractor);
-  keyExtractorRef.current = useMemo(() => {
-    return (item: T, index: number) => {
-      const key = keyExtractor(item, index);
-      if (isReorderingRef.current) {
-        return key + "_reordering";
-      }
-      return key;
-    };
-  }, [keyExtractor]);
-
   const shouldCapturePan = useCallback(() => {
     return !!activeDataRef.current && !isReorderingRef.current;
   }, []);
@@ -341,8 +329,10 @@ function DragListImpl<T>(
 
           await reorderRef.current?.(activeIndex, panIndex.current);
         } finally {
-          reset(); // Guarantee resetting by putting this in finally
+          // This needs to come before reset(), which causes a re-render that depends on
+          // isReorderingRef.current reflecting the fact we're not reordering anymore.
           isReorderingRef.current = false;
+          reset(); // Guarantee resetting by putting this in finally
         }
       } else {
         // #76 - Only reset here if we're not going to reorder the list. If we are instead