Force a single re-render with useSelector

Question

This is a follow-up to Refactoring class component to functional component with hooks, getting Uncaught TypeError: func.apply is not a function

I've declared a functional component Parameter that pulls in values from actions/reducers using the useSelector hook:

const Parameter = () => {
let viz = useSelector(state => state.fetchDashboard);
const parameterSelect = useSelector(state => state.fetchParameter)
const parameterCurrent = useSelector(state => state.currentParameter)
const dispatch = useDispatch();
const drawerOpen = useSelector(state => state.filterIconClick);

const handleParameterChange = (event, valKey, index, key) => {
    parameterCurrent[key] = event.target.value;
    return (
        prevState => ({
            ...prevState,
            parameterCurrent: parameterCurrent
        }),
        () => {
            viz
                .getWorkbook()
                .changeParameterValueAsync(key, valKey)
                .then(function () {
                    //some code describing an alert
                    });
                })

                .otherwise(function (err) {
                    alert(
                        //some code describing a different alert
                    );
                });
        }
    );
};
const classes = useStyles();
return (
    <div>
        {drawerOpen ? (
            Object.keys(parameterSelect).map((key, index) => {
                return (
                    <div>
                        <FormControl component="fieldset">
                            <FormLabel className={classes.label} component="legend">
                                {key}
                            </FormLabel>
                            {parameterSelect[key].map((valKey, valIndex) => {
                                return (
                                    <RadioGroup
                                        aria-label="parameter"
                                        name="parameter"
                                        value={parameterCurrent[key]}//This is where the change should be reflected in the radio button
                                        onChange={(e) => dispatch(
                                            handleParameterChange(e, valKey, index, key)
                                        )}
                                    >
                                        <FormControlLabel
                                            className={classes.formControlparams}
                                            value={valKey}
                                            control={
                                                <Radio
                                                    icon={
                                                        <RadioButtonUncheckedIcon fontSize="small" />
                                                    }
                                                    className={clsx(
                                                        classes.icon,
                                                        classes.checkedIcon
                                                    )}
                                                />
                                            }
                                            label={valKey}
                                        />
                                    </RadioGroup>
                                );
                            })}
                        </FormControl>
                        <Divider className={classes.divider} />
                    </div>
                );
            })
        ) : (
                <div />
            )
        }
    </div >
)
};
export default Parameter;

What I need to have happen is for value={parameterCurrent[key]} to rerender on handleParameterChange (the handleChange does update the underlying dashboard data, but the radio button doesn't show as being selected until I close the main component and reopen it). I thought I had a solution where I forced a rerender, but because this is a smaller component that is part of a larger one, it was breaking the other parts of the component (i.e. it was re-rendering and preventing the other component from getting state/props from it's reducers). I've been on the internet searching for solutions for 2 days and haven't found anything that works yet. Any help is really apprecaited! TIA!

score 1 · Answer 1 · answered Mar 17 '20 at 03:44

1

useSelector() uses strict === reference equality checks by default, not shallow equality.

To use shallow equal check, use this

import { shallowEqual, useSelector } from 'react-redux'

const selectedData = useSelector(selectorReturningObject, shallowEqual)

answered Mar 17 '20 at 03:44

Pushkin

3,336
1
17
30

Thanks, Vijay! Unfortunately, this doesn't seem to have fixed the problem; however, I'll read up on the information in your link, see if there's something there that will do it. – Rachel Stevens Mar 17 '20 at 03:59

score -1 · Answer 2 · answered Mar 17 '20 at 15:33

Ok, after a lot of iteration, I found a way to make it work (I'm sure this isn't the prettiest or most efficient, but it works, so I'm going with it). I've posted the code with changes below.

I added the updateState and forceUpdate lines when declaring the overall Parameter function:

const Parameter = () => {
let viz = useSelector(state => state.fetchDashboard);
const parameterSelect = useSelector(state => state.fetchParameter)
const parameterCurrent = useSelector(state => state.currentParameter);
const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
const dispatch = useDispatch();
const drawerOpen = useSelector(state => state.filterIconClick);

Then added the forceUpdate() line here:

const handleParameterChange = (event, valKey, index, key) => {
parameterCurrent[key] = event.target.value;
return (
    prevState => ({
        ...prevState,
        parameterCurrent: parameterCurrent
    }),
    () => {
        viz
            .getWorkbook()
            .changeParameterValueAsync(key, valKey)
            .then(function () {
                //some code describing an alert
                });
            })

            .otherwise(function (err) {
                alert(
                    //some code describing a different alert
                );
            });
forceUpdate() //added here
    }
);

};

Then called forceUpdate in the return statement on the item I wanted to re-render:

<RadioGroup
                                        aria-label="parameter"
                                        name="parameter"
                                        value={forceUpdate, parameterCurrent[key]}//added forceUpdate here
                                        onChange={(e) => dispatch(
                                            handleParameterChange(e, valKey, index, key)
                                        )}
                                    >

I've tested this, and it doesn't break any of the other code. Thanks!

Force a single re-render with useSelector

2 Answers2