setState via ref not working inside useEffect?

Question

I'm trying to clear filtered state of a react table component using useRef viz. ref.current.setState({...}). This is a snippet from my component:

const Customers = (props) => {
  const customerTableRef = useRef()

  useEffect(() => {
    const customerTable = customerTableRef.current
    if (customerTable) {
      customerTable.setState({ ...customerTable.state, filtered: [] })
      console.log("table effect::", customerTable.state)
    }
  }, [props.selectedDealer])

I have a select input in the UI which is bound to props.selectedDealer I want to clear the filters of react table whenever user changes props.selectedDealer. The react table component isn't available in the Customers component but at a very low level in the hierarchy:

Customers > CustomersTable > AppTableWrapper > AppTable > ReactTable.

I'm passing down the customerTableRef to ReactTable. In the dev tools, I can see the ref is inflated with the component options but customerTable.setState({ ...customerTable.state, filtered: []}) is not mutating the state of ReactTable.

score 0 · Answer 1 · answered Mar 17 '20 at 14:50

I suggest pass customerTable to redux. After we pass it to your component by redux. In a state variable: useState or useReducer. Updates in state variables will cause a re-render of the component. In a ref: Equivalent to instance variables in class components. Mutating the .current property won’t cause a re-render

setState via ref not working inside useEffect?

1 Answers1