Trouble debouncing setState in Context (react-native)

Question

I'm rendering a lot of Text components and saving positions (in order to scroll to them), but I would like to improve performance by "bundling" it by a debounce (and are open for other suggestions that would improve performance).

  ...
  import debounce from 'lodash/debounce'
  ...
  class ContextProvider extends Component {
  ....
  setContentPosition = (layout, key) => {
    const contentPos = { ...this.state.contentPos }
    contentPos[key] = layout.nativeEvent.layout.y
    // TODO: make it debounce https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
    this.setState({ contentPos }, () => console.log('contPos updated'))
  }
  ...
  render() {
    return (
      <Provider
        value={{
          setContentPosition: this.setContentPosition,
        }}
      >
        {this.props.children}
      </Provider>
    )
  }
}

I have tried a couple of different combinations, without luck. Was expecting this to work:

  ...
  render() {
    return (
      <Provider
        value={{
          setContentPosition: debounce(this.setContentPosition, 200),
        }}
      >
        {this.props.children}
      </Provider>
    )
  }
}

It throws the following error:

Update 01

The following change (for contentPos[key])

  setContentPosition = (layout, key) => {
    const contentPos = { ...this.state.contentPos }
    //console.log(layout.nativeEvent)
    contentPos[key] = layout.nativeEvent
    // TODO: make it debounce https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
    this.setState({ contentPos }, () => {
      console.log('contPos updated')
    })
  }

displays this warning instead:

The position is to be used for scrolling to a text component (when searching) and I have some testing code that scrolls to some Text component - works on iOS but not on Android?

Did you import `debounce` from lodash as such? not `_.debounce`? — Akrion, Oct 12 '18 at 20:37
Possible duplicate of [Perform debounce in React.js](https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js) — miguelsolano, Oct 12 '18 at 20:45
@m.a.solano93 I know that it appears to be a duplicate (my code even link to this as a comment), but the answer doesn't work in my instance - think it is because my function takes to params? — Norfeldt, Oct 12 '18 at 20:49
Can you console.log out your var `layout.nativeEvent` and see what the result is? Its hung up on the fact that it think `layout.nativeEvent.layout` is null and thus not an `object`. — miguelsolano, Oct 12 '18 at 21:15
It now shows a warning `ExceptionsManager.js:71 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property 'nativeEvent' on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). ` — Norfeldt, Oct 12 '18 at 21:33
Think it is wierd that I now shows a warning instead of a red error. — Norfeldt, Oct 12 '18 at 21:37
it's an old post. Don't recall finding a solution. Typically when I find one and it's not among the answers I post a solution as an answer — Norfeldt, May 20 '20 at 16:49
@Fluous perhaps the react memorize hook would be worth looking into? — Norfeldt, May 20 '20 at 16:50

Trouble debouncing setState in Context (react-native)

Update 01

0 Answers0