Pass custom hooks conditionally in useTable

[mjangir]

It's nice that react table provides useRowSelect plugin hook to maintain selected rows where we can select/unselect multiple table records. My requirement is slightly different. In our table, we want to render radio buttons instead of checkbox and user can select only one row at a time.

I achieved this by creating new plugin hooks called useSingleRowSelect and useRadioColumn. The first hook maintains only one selected row in the state and the other hook just injects one column with radio button in the beginning of the columns array.

This is how I use it:
const instance = useTable(...table opts, ...otherhooks, props.multi ? useRowSelect : useSingleRowSelect)

The problem here is if I just change the prop multi to false, the component re-renders and throws an error rendered more hooks than during the previous render.

Does anybody know how to solve this error?

[azinod]

React does not allow you to render hooks conditionally. You have to always render the same hooks on every render. The useTable hook is probably rendering those custom hooks for you, so if you change the props.multi to render a different hook, React will notice there is a missing hook and a new one, and then throw an error.

There aren't many elegant solutions (that I know of) for this, I usually do one of the following:

• Forget about it and just use a single hook;
• Refactor/create new hook that does all that is needed. Maybe you can have a hook that allows you to change its instance behavior based on the props.multi? This could work, since it would still be the same hook rendered at all the times and you would be playing with its instance.
• Or you can keep both hooks rendered at all times and somehow use the props.multi to switch between their instances instead of rendering a different hook;

So, yeah, make sure the same hooks are rendered on every component render until it unmounts. You are able to play as much as you want with the hook instances, but you you can't conditionally render or not render them.

[aggie2016]

@mjangir We have a similar requirement. Would you be willing to share your custom hooks for rendering radio buttons?

[aggie2016]

For those looking for a solution, here is something I made based on a suggestion by @mjangir 👍 and forked from useRowSelect:

import React from 'react'

import {
    actions,
    makePropGetter,
    ensurePluginOrder,
    useGetLatest,
    useMountedLayoutEffect,
} from 'react-table';

const pluginName = 'useSingleRowSelect';

// Actions
actions.resetSelectedRows = 'resetSelectedRows';
actions.toggleRowSelected = 'toggleRowSelected';

export const useSingleRowSelect = hooks => {
    hooks.getToggleRowSelectedProps = [defaultGetToggleRowSelectedProps];
    hooks.stateReducers.push(reducer);
    hooks.useInstance.push(useInstance);
    hooks.prepareRow.push(prepareRow);
};

useSingleRowSelect.pluginName = pluginName;

const defaultGetToggleRowSelectedProps = (props, { instance, row }) => {
    const { manualRowSelectedKey = 'isSelected' } = instance;
    let checked = false;

    if (row.original && row.original[manualRowSelectedKey]) {
        checked = true
    } else {
        checked = row.isSelected
    }

    return [
        props,
        {
            onChange: e => {
                row.toggleRowSelected(e.target.checked)
            },
            style: {
                cursor: 'pointer',
            },
            checked,
            title: 'Toggle Row Selected'
        },
    ]
}

function reducer(state, action, previousState, instance) {
    if (action.type === actions.init) {
        return {
            selectedRowId: {},
            ...state,
        }
    }

    if (action.type === actions.resetSelectedRows) {
        return {
            ...state,
            selectedRowId: instance.initialState.selectedRowIds || {},
        }
    }

    if (action.type === actions.toggleRowSelected) {
        const { id, value: setSelected } = action;
        const { rowsById } = instance;

        // Join the ids of deep rows
        // to make a key, then manage all of the keys
        // in a flat object
        const row = rowsById[id];
        const isSelected = row.isSelected;
        const shouldExist =
            typeof setSelected !== 'undefined' ? setSelected : !isSelected;

        if (isSelected === shouldExist) {
            return state
        }

        return {
            ...state,
            selectedRowId: id,
        }
    }
}

function useInstance(instance) {
    const {
        data,
        rows,
        getHooks,
        plugins,
        autoResetSelectedRows = true,
        state: { selectedRowId },
        selectSubRows = true,
        dispatch,
    } = instance;

    ensurePluginOrder(
        plugins,
        ['useFilters', 'useGroupBy', 'useSortBy'],
        'useSingleRowSelect'
    );

    const selectedFlatRows = React.useMemo(() => {
        const selectedFlatRows = [];

        rows.forEach(row => {
            const isSelected = selectSubRows
                ? getRowIsSelected(row, selectedRowId)
                : !!selectedRowId;
            row.isSelected = !!isSelected;
            row.isSomeSelected = isSelected === null;

            if (isSelected) {
                selectedFlatRows.push(row)
            }
        });

        return selectedFlatRows
    }, [rows, selectSubRows, selectedRowId]);

    const getAutoResetSelectedRows = useGetLatest(autoResetSelectedRows);

    useMountedLayoutEffect(() => {
        if (getAutoResetSelectedRows()) {
            dispatch({ type: actions.resetSelectedRows })
        }
    }, [dispatch, data]);

    const toggleRowSelected = React.useCallback(
        (id, value) => dispatch({ type: actions.toggleRowSelected, id, value }),
        [dispatch]
    );

    Object.assign(instance, {
        selectedFlatRows,
        toggleRowSelected
    })
}

function prepareRow(row, { instance }) {
    row.toggleRowSelected = set => instance.toggleRowSelected(row.id, set)

    row.getToggleRowSelectedProps = makePropGetter(
        instance.getHooks().getToggleRowSelectedProps,
        { instance: instance, row }
    )
}

function getRowIsSelected(row, selectedRowId) {
    return selectedRowId === row.id;
}

[tannerlinsley]

The most important thing I've learned about hooks is to always offer an enabled property that essentially disables everything.

[pwhipp]

I couldn't find an enabled property for any of the hooks in the react-table source. Do you have an example that shows this pattern?

[mathieu-fournier]

@pwhipp
Have you found a way to use the enabled property in a custom hook ?

[tracykm]

I know this is an old thread, but I often use a key to force react to see it as a new component when I have something that needs to change the number of hooks. Not the most performant maybe, but a nice escape hatch.

const [multi, setMulti] = useState(false)
return <MyReactTable {...{ key: multi, data, columns, multi }}  />

...

const MyReactTable = ({ data, columns, multi}) => {
  const instance = useTable({ data, columns }, multi ? useRowSelect : useSingleRowSelect)
  ...
}

[CatPerry]

@tracykm This solution works and React doesnt complain about it, even though it looks like it is conditionally invoking hooks (which is very much so a React antipattern). But Tracy's approach above isnt actually conditionally rendering hooks because the hook isnt invoked yet.

And per @tannerlinsley's brief input above, that'd be nice to be able to send React Table a prop telling it which instance of useTable or its other hooks we want to render. But unlike his comment, I dont see a way to do that with RT. So... I'm doing something similar to you @tracykm in my project because I need to be able to tell React Table to useRowSelect only if a hasBulkSelect prop is passed in to the table. Typescript complains, so you'll see that there as useCheckbox as any.

 const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: { selectedRowIds },
  } = useTable(
    {
      columns: tableColumns,
      data: tableData,
      disableSortRemove: true,
      defaultCanSort: true,
      initialState,
    },
    useSortBy,
    useExpanded,
    useRowSelect,
    hasBulkSelect && (useCheckboxes as any), // `hasBulkSelect` is a prop I pass into the component and `useCheckboxes` is my custom checkbox hook that's similar to the React Table example
  );