Custom callback passed to component connected with refinementsList inside component connected with currentRefinements is causing app to hang

[Wozniaxos]

🐛 Bug description

Custom callback passed to component connected with refinementsList inside component connected with currentRefinements is causing app to hang

🔍 Bug reproduction

Try to pass to ConnectedCompoent some callback inside CurrentRefinementsComponent for example myFn={() => {}} than refresh, app will hang

Live reproduction:

https://codesandbox.io/s/frosty-glade-74p1d?file=/src/CurrentRefinementsConnected.js

💭 Expected behavior

I should be able to pass my custom additional callbacks to connected component.

Environment

• OS: macOS
• Browser: Chrome
• Version: [e.g. 6.21]

Additional context

It happened on 6.12, and now on 6.21 it is still the same.

[tkrugg]

Hi @Wozniaxos thanks for providing the example but I wasn't able to get it to hang. Can you detail the steps to witness this behaviour?

[MiguelNiblock]

I'm having the same issue. See this example. Here I'm passing three additional props that will be used inside my wrapped component: focused, onFocus and onBlur. The app freezes when this component gets rendered.

function SearchComp({ refine, currentRefinement, ...rest }: SearchBoxProvided & { focused: boolean } & TextInputProps) {
  return (
    <SearchBar onChangeText={refine} value={currentRefinement} placeholder="Search..." style={{ flex: 1 }} {...rest} />
  )
}
const SearchBarWrapped = connectSearchBox(SearchComp)



export default function MobileExploreSearch() {
  const [focused, setFocused] = useState(false)
  return (
    <View style={[styles.container, { marginTop: safeAreaInsets.top + 10 }]}>
      <SearchBarWrapped focused={focused} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} />
      {!focused && <ButtonClear icon="filter" style={styles.icon} />}
    </View>
  )
}