Use DataList

Summary:
With new abstraction, `DataList` matches what the plugin trying to render.

Should fix:
https://fb.workplace.com/groups/flippersupport/permalink/1145431339270856/

Changelog: [MobileConfig] Fix issues with scrolling not working and several other improvements

Reviewed By: cekkaewnumchai

Differential Revision: D28314408

fbshipit-source-id: 4d8fbe3d8e868f737750203cd568d94bae8b4108

desktop/flipper-plugin/src/utils/useLatestRef.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {useEffect, useRef} from 'react';
+
+/**
+ * Creates a ref object that is always synced from the value passed in.
+ */
+export function useLatestRef<T>(latest: T): {readonly current: T} {
+  const latestRef = useRef(latest);
+
+  // TODO: sync eagerly (in render) or late? Introduce a `syncEarly` flag as second arg
+  useEffect(() => {
+    latestRef.current = latest;
+  }, [latest]);
+
+  return latestRef;
+}

desktop/flipper-plugin/src/utils/useMakeStableCallback.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {useCallback} from 'react';
+import {useLatestRef} from './useLatestRef';
+
+/**
+ * This hook can be used to avoid forcing consumers of a component to wrap their callbacks
+ * in useCallback, by creating wrapper callback that redirects to the lastest prop passed in.
+ *
+ * Use this hook if you would like to avoid that passing a new callback to this component,
+ * will cause child components to rerender when the callback is passed further down.
+ *
+ * Use it like: `const onSelect = useMakeStableCallback(props.onSelect)`.
+ * @param fn
+ */
+export function useMakeStableCallback<
+  T extends undefined | ((...args: any[]) => any),
+>(fn: T): T {
+  const latestFn = useLatestRef(fn);
+
+  return useCallback(
+    (...args: any[]) => {
+      return latestFn.current?.apply(null, args);
+    },
+    [latestFn],
+  ) as any;
+}