useResponsiveProps: Fixes default breakpoint prop value assignment

[kettanaito]

Changes

• Assigns proper initial value for the state in useResponsiveProps

When rendered on a server no React hooks are run. The useEffect hook in useResponsiveProps is no exception, and this results into server-side markup containing no props at all, because the initial state of the respective useState hook is undefined. To prevent this, I make the filtering function parametric and call it with a server-side-like matcher as the initial value of the useState hook.

• Adds a unit test for useResponsiveComponent function

GitHub

• Closes useResponsiveComponent prop values not applied during SSR #272

Release version

• patch (internal improvements)
• minor (backward-compatible changes)
• major (breaking, backward-incompatible changes)

Contributor's checklist

• My branch is up-to-date with the latest master
• I ran yarn verify and verified the build and tests passing
• Decide on the "down" behavior matching (useResponsiveProps does not respect behavior on SSR #284)

[kettanaito]

Hi, @ruhaise. Could you please take a look at this pull request?

I've tried to address the issue you were fixing in #276 using a custom matching function during responsive props filtering. Tests pass, but I've found out that we cannot currently handle the "down" behavior, if it affects the default breakpoint also (see the skipped test for useResponsiveComponent.test.ts). I'm still thinking how to resolve that properly.

[ruhaise]

i had no clue how to remove the approval state

[kettanaito]

@ruhaise, I'm not sure what's the issue. I've requested another review from you, so feel free to approve or request changes with commenting on places you think can be improved. Thanks!

[kettanaito]

I think I'll file a separate issue regarding how the "down" behavior is handled. The thing is that this issue is reproducible even in the latest release, so it can be tackled separately if its complexity is too high for this pull request. I'd rather spend some time thinking how to approach this.

[ruhaise]

@kettanaito approved and added a very minor comment