ci: add incompatible-library lint checks (#10214)

Author: mikeldking

app/eslint.config.mts

@@ -65,10 +65,8 @@ export default defineConfig([
   {
     files: ["**/*.{ts,tsx}"],
     rules: {
-      // TODO: Re-enable this rule once we've addressed the incompatible library warnings
-      // This rule warns about using APIs from libraries like React Hook Form and TanStack Table
-      // that return functions which cannot be safely memoized by React Compiler
-      "react-hooks/incompatible-library": "off",
+      // this is made an error so that it forces us to validate it works with the react compiler
+      "react-hooks/incompatible-library": "error",
       // TODO: Re-enable this rule once we've addressed the issue with setState in useEffect
       // This rule prevents calling setState in useEffect which can cause unstable results when components re-render
       "react-hooks/set-state-in-effect": "off",

app/src/components/datasetSplit/NewDatasetSplitForm.tsx

@@ -34,6 +34,7 @@ export function NewDatasetSplitForm({
   onSubmit,
   isSubmitting,
 }: NewDatasetSplitFormProps) {
+  "use no memo";
   const {
     control,
     handleSubmit,
@@ -58,6 +59,7 @@ export function NewDatasetSplitForm({
             justifyContent="center"
             width="100%"
           >
+            {/* eslint-disable-next-line react-hooks/incompatible-library */}
             <Token color={watch("color")}>
               {watch("name") || "split preview"}
             </Token>

app/src/components/label/NewLabelForm.tsx

@@ -30,6 +30,7 @@ type NewLabelFormProps = {
   isSubmitting: boolean;
 };
 export function NewLabelForm({ onSubmit, isSubmitting }: NewLabelFormProps) {
+  "use no memo";
   const {
     control,
     handleSubmit,
@@ -53,6 +54,7 @@ export function NewLabelForm({ onSubmit, isSubmitting }: NewLabelFormProps) {
             justifyContent="center"
             width="100%"
           >
+            {/* eslint-disable-next-line react-hooks/incompatible-library */}
             <Token color={watch("color")}>
               {watch("name") || "label preview"}
             </Token>

app/src/components/table/Table.tsx

@@ -21,6 +21,8 @@ export function Table<DataRow extends object>({
   columns,
   data,
 }: TableProps<DataRow>) {
+  "use no memo";
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable<DataRow>({
     columns,
     data,

app/src/pages/dashboards/DashboardsPage.tsx

@@ -68,6 +68,7 @@ function DashboardsTable({ dashboards }: { dashboards: Dashboard[] }) {
     ],
     []
   );
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     columns,
     data: dashboards,
@@ -135,6 +136,7 @@ function DashboardsTable({ dashboards }: { dashboards: Dashboard[] }) {
 }
 
 export function DashboardsPage() {
+  "use no memo";
   const loaderData = useLoaderData<typeof dashboardsLoader>();
   // For now, use mock data for dashboards
   const dashboards = [

app/src/pages/dashboards/ProjectDashboardsTable.tsx

@@ -22,6 +22,7 @@ export function ProjectDashboardsTable({
 }: {
   query: ProjectDashboardsTable_projects$key;
 }) {
+  "use no memo";
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment(
     graphql`
@@ -84,6 +85,7 @@ export function ProjectDashboardsTable({
     ],
     []
   );
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     columns,
     data: projects,

app/src/pages/dataset/DatasetHistoryTable.tsx

@@ -22,6 +22,7 @@ type DatasetHistoryTableProps = {
 };
 
 export function DatasetHistoryTable(props: DatasetHistoryTableProps) {
+  "use no memo";
   //we need a reference to the scrolling element for logic down below
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment(
@@ -66,6 +67,7 @@ export function DatasetHistoryTable(props: DatasetHistoryTableProps) {
     },
     [hasNext, isLoadingNext, loadNext]
   );
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     columns: [
       {

app/src/pages/datasets/DatasetsTable.tsx

@@ -59,6 +59,7 @@ function toGqlSort(sort: SortingState[number]): DatasetSort {
 }
 
 export function DatasetsTable(props: DatasetsTableProps) {
+  "use no memo";
   const { filter, labelFilter } = props;
   const [sorting, setSorting] = useState<SortingState>([]);
   //we need a reference to the scrolling element for logic down below
@@ -292,6 +293,7 @@ export function DatasetsTable(props: DatasetsTableProps) {
     }
     return cols;
   }, [filter, labelFilter, notifyError, notifySuccess, refetch, canModify]);
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     columns,
     data: tableData,

app/src/pages/embedding/EventDetails.tsx

@@ -72,6 +72,7 @@ function TextPre(props: PropsWithChildren) {
  * Displays the details of an event in a slide over panel
  */
 export function EventDetails({ event }: { event: ModelEvent }) {
+  "use no memo";
   const hasRetrievals =
     event.retrievedDocuments && event.retrievedDocuments.length > 0;
   const isPredictionRecord = !event.id.includes("CORPUS");
@@ -274,6 +275,7 @@ function EmbeddingDimensionsTable({
     []
   );
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable<DimensionRow>({
     columns,
     data,

app/src/pages/embedding/PointSelectionTable.tsx

@@ -30,6 +30,7 @@ export function PointSelectionTable({
   data: ModelEvent[];
   onPointSelected: (pointId: string) => void;
 }) {
+  "use no memo";
   const { primaryInferences, referenceInferences } = useInferences();
   const metric = usePointCloudContext((state) => state.metric);
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -179,6 +180,7 @@ export function PointSelectionTable({
     return { columns, tableData };
   }, [data, onPointSelected, primaryInferences, referenceInferences, metric]);
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable<TableDataItem>({
     columns,
     data: tableData,