Filter component not re-rendering

[jamiek-acl]

In the Filter component I am trying to add an external button that if i click it, it applies another filter. Its not working as seen here (click the "Add Romario filter" button, notice how the filter count does not increase and there is no filter in the side panel): https://codesandbox.io/s/keen-rgb-7lmhg?file=/src/App.js

I got it to work by changing the key of the Filter's parent (click the "Add Romario filter" button, notice how the filter count DOES increase and there is a filter in the side panel): https://codesandbox.io/s/exciting-fast-ur8y8?file=/src/App.js but that unmounts and remounts the entire component unnecessarily.

Allison said:

I think this component should re-render as well
but the paprika filter component won’t recalculate the state
Do you think if it can be fixed by:
- the useFilter hook returns the dispatch  function
- the defaultReducer  adds a new case about updateState
- or we can just export a function called `updateState` from useFilter()  , and don’t export the dispatch

[AndreyChernykh]

The problem is that packages/Filter/src/hooks/useFilter.js accepts filters as an initialState (so it doesn't react on any changes that happen after the initial render)

I believe, the API of this component needs to be reimagined and rewritten.