question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: registered field count is +1 after server side rendered redux state rehydration

See original GitHub issue

This is bug report following the changes in #2470

To reproduce this bug:

  • Have a server side rendered form
  • Have the server side redux state serialized and sent to the client as an initial state
  • Hydrate the redux state on the client
  • Mount the same form

Expected behavior is a correct count of registered fields. Assuming the field is mounted once, it should be 1 - instead it’s 1 + 1 = 2.

This occurs on any environment - regardless.

Root cause of this problem is the previous assumption of the library that when a REGISTER_FIELD event is raised - it will do an “upsert” of the field to the registeredField list. Since now there is a sort of reference counting going on - this +1 the current state.

A solution, unfortunately would be to indicate the state is server generated and prevent the initial redundant increment. Otherwise, differentiation between new registrations and additional registrations.

What is not a solution:

  • Ignore SSR scenarios
  • Reset the entire form state on the client - Sometimes we have initial values rendered on the server or other state which could be important.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:6
  • Comments:13 (6 by maintainers)

github_iconTop GitHub Comments

5reactions
gustavohenkecommented, Dec 6, 2017

Because this issue saw almost no activity for a few months, I’m closing it.

4reactions
tikotzkycommented, Jun 15, 2017

This issue is affecting me as well. I am able to “fix” it by modifying the reducer to skip the REGISTER_FIELD action when running on the server

    [REGISTER_FIELD](state, { payload: { name, type } }) {
+      if (!isBrowser) return state;
      const key = `registeredFields['${name}']`
      let field = getIn(state, key)
      if (field) {
        const count = getIn(field, 'count') + 1
        field = setIn(field, 'count', count)
      } else {
        field = fromJS({ name, type, count: 1 })
      }
      return setIn(state, key, field)
    },

as @yoadsn pointed out there is a precedent for libraries changing behavior when running on the server to support SSR. (you can see that glamor does something similar here)

I’d be willing to try and take this further if this is something that redux form would be willing to accept.

Either way thanks for the great lib…

Read more comments on GitHub >

github_iconTop Results From Across the Web

registered field count is +1 after server side rendered redux ...
This issue is causing redux form to put a field into an invalid state even when the field that is invalid is no...
Read more >
Redux Server Side Rendering: Actions - reactjs - Stack Overflow
The issue I'm having is: the {renderToString} from 'react-dom/server' renders only the pristine version of the store, if something changes the ...
Read more >
How to use Redux in Next.js - LogRocket Blog
Learn how to incorporate Redux, the most popular state management tool, into Next.js quickly and easily in this full tutorial.
Read more >
Usage Guide - Redux Toolkit
Usage Guide. The Redux core library is deliberately unopinionated. It lets you decide how you want to handle everything, like store setup, ...
Read more >
hydration failed because the initial ui does not match what was ...
Open side panel. Error: Hydration failed because the initial UI does not match what was rendered on the server with useSession() and react-bootstrap....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found