将 Redux 与 useEffect Hook 混合

Question

I read that this is theoretically OK. In my small use case, I'm running into an issue, where mixing those technologies leads to double re-rendering.

First, when redux dispatch is executed and some components use a prop via useSelector. Then, after the functional component is already re-rendered, a useEffect hook is being applied which updates the state of some property. This update re-triggers the render again.

Eg the below console log prints out twice in my case.

Question: should I remove the useEffect and useState and integrate it into redux' store?

import {useSelector} from "react-redux";
import React from "react";


const Dashboard = (props) => {
    const selFilters = useSelector((state) => state.filter.selectedDashboardFilters);
    const [columns, setColumns] = React.useState([]);

    React.useEffect(() => {
            let newColumns = getColumns();
            setColumns(newColumns)
        }, [selFilters]
    )
    
    console.log("RENDER")
    
    return (
        <h1>{columns.length}</h1>
    )
}

Answer 1

If columns needs to be recomputed whenever selFilters changes, you almost certainly shouldn't be recomputing it within your component. If columns is computed from selFilters , then you likely don't need to store it as state at all. Instead, you could use reselect to create a getColumns() selector that derives the columns from the state whenever the relevant state changes. For example:

const getColumns = createSelector(
  state => state.filter.selectedDashboardFilters,
  selFilters => {
    // Compute `columns` here
    // ...
    return columns
  }
)