[v.7.0.0] Component one update behind

[luskin]

What is the current behavior?

After upgrading to v7.0.0-beta.0 our child components are one update behind the state unless we connect the parent component as well.

Here is a simple test component:

// @flow
import React from 'react'
import { connect } from 'react-redux'

type Props = {
  user: Object,
  organization: Object
}

/**
 *
 * @param {user} Object user from redux state
 * @param {organization} Object organization from redux state
 */
export const TestComponent = ({ user, organization }: Props) => {
  console.log('First Name [Component]: ', user.firstName)
  return <div>{user.firstName}</div>
}

export const MSP = ({ user, organization }: Props) => {
  console.log('First Name [MSP]: ', user.firstName)
  return { user, organization }
}
export default connect(MSP)(TestComponent)

Here is the output using react-redux 6.0.1:

[DEBUG]: Initialize user module
First Name [MSP]:  Greg
First Name [Component]:  Greg
--- HERE IS WHERE THE STATE WAS UPDATED ---
First Name [MSP]:  Gregg
First Name [Component]:  Gregg

here is the output using react-redux 7.0.0-beta.0

[DEBUG]: Initialize user module
First Name [MSP]:  Greg
First Name [Component]:  Greg
--- HERE I UPDATED STATE FROM Greg to Gregg ---
First Name [MSP]:  Gregg
--- NOTICE THAT COMPONENT WAS NOT UPDATED ---
--- I THEN PROCEED TO UPDATE THE STATE TO Greggg ---
First Name [MSP]:  Greggg
First Name [Component]:  Gregg

As you can see mapStateToProps requires the state to be modified a second time before updating the component to the previous state. It seems as though possibly the comparison check is not firing off?

Things I have tried:

• Spreading the objects into a new object (new reference, comparison should be false and thus a rerender), this did not work.
• Updating the functional component to a PureComponent and then Component, this did not work.
• Removed all hooks from parent component, this did not work
• Connecting parent component and mapStateToProps-ing the user object, THIS DID WORK

What is the expected behavior?
Redux should do an equality check and notice that the state is different and update the component props accordingly.

React 16.8.5
React-Redux: 7.0.0-beta.0

[markerikson]

Can you please provide a sample project that reproduces the issue, either as a CodeSandbox or a cloneable repo?

[luskin]

@markerikson I just spend about 30 mins trying to replicate it in a simple project, unfortunately the problem is not present in a simple implementation. I cannot share the project that this issue is occurring in as it is a core product of my company.

One thing I noticed when trying to replicate this in a side project is that when updating the state from UI (i.e. a button) it seems to work fine in v7.0.0-beta.0 however when it's updated from within a saga it does not force the re-render.

I wish I could get this replicated in a project I am allowed to share. We'll see if anyone else pops in with this issue and can better provide a replication source.

For the time being we will drop back to 6.0.1 and continually try 7 as it becomes more mature.

[markerikson]

I would really appreciate it if you could try to replicate this further. At a minimum, could you give some examples of where and how you are triggering state updates in relation to that component snippet?

This is exactly the kind of feedback I'm looking for to determine whether v7 is ready for final release. If there are issues, I want to resolve them now, but I need more info to be able to dig in myself.

[josepot]

Hi @luskin I'm trying to help at reproducing this, because I think that I experienced something similar yesterday.

One question, though, when you say that:

child components are one update behind the state unless we connect the parent component as well

What do you mean exactly?

Do you mean that this only happens with a connected component that doesn't have any other connected components among its ancestors? I mean, are you saying that this problem doesn't happen with connected components that are "nested" with other connected components? Could you please elaborate more on this?

Thanks!

[luskin]

One thing to note that I did not mention previously is that we are using redux-dynamic-modules from Microsoft. It is possible that there is a mismatch between that package and redux 7. However for sake of the issue I will continue...

After a user is authenticated (firebase auth) in our <RedirectHandler /> we return a <CustomerDashboard /> component. On customer dashboard load we turn on firebase database listeners for the user object. These listeners are built with a saga channel/event emitter. On any change we fire off a child_update, child_added, child_removed dispatch action and reduce the new user object.

<CustomerDashboard /> connects to redux for user updates and here in-lies the issue, this is where the user object is always one update behind the stored state. When inspecting the redux state the user gets updated properly and the mapStateToProps get's called accordingly but it does not trigger a re-render of the <CustomerDashboard /> component and thus does not trickle changes down.

IF we connect our <RedirectHandler /> to redux and return the user object to props then everything works as expected, but this is a hack.

I'll share these two components and they do not expose anything sensitive:

CustomerDashboard:

// @flow
import React from 'react'
import { connect } from 'react-redux'
import Dashboard from 'views/dashboard'
import SideNav from 'views/customer/sideNav'
import CustomerRoutes from 'router/customer'
import { Wrapper, PageContent } from './style'

// Dynamic Modules
import { DynamicModuleLoader } from 'redux-dynamic-modules'
import shipmentsModule from 'store/modules/shipments'
import userModule from 'store/modules/user'
import organizationModule from 'store/modules/organization'

// Contexts
import UserContext from 'contexts/user/index'
import OrganizationContext from 'contexts/organization/index'

type Props = {
  user: Object,
  organization: Object
}

/**
 *
 * @param {user} Object passes in the original user object obtained from the identification process
 * @param {organization} Object passes in the original organization object ob tained from the identification process
 */
export const CustomerDashboard = ({ user, organization }: Props) => {
  return (
    <DynamicModuleLoader
      modules={[userModule(user), organizationModule(organization), shipmentsModule()]}
    >
      <UserContext.Provider value={user}>
        <OrganizationContext.Provider value={organization}>
          <Dashboard>
            <Wrapper>
              <SideNav />
              <PageContent>
                <CustomerRoutes />
              </PageContent>
            </Wrapper>
          </Dashboard>
        </OrganizationContext.Provider>
      </UserContext.Provider>
    </DynamicModuleLoader>
  )
}
export const MSP = ({ user, organization }: Props) => ({ user, organization })
export default connect(MSP)(CustomerDashboard)

RedirectHandler:

// @flow
import React, { useContext } from 'react'
import AuthContext from 'contexts/auth'
import useIdentificationProcess from './useIdentificationProcess'
import isLoadingApplication from './helpers/isLoadingApplication'
import isShipperOrganization from './helpers/isShipperOrganization'

// Views
import Authentication from 'views/authentication'
import ApplicationLoadingView from 'views/applicationLoading'
import CustomerDashboard from 'views/customer/dashboard'

export const RedirectHandler = () => {
  const auth = useContext(AuthContext)
  const { user, organization } = useIdentificationProcess()
  const isLoading = isLoadingApplication({ auth, user, organization })
  const isShipper = isShipperOrganization({ organization })

  // App Loading View
  if (isLoading) {
    return <ApplicationLoadingView />
  }

  // Unathenticated Router
  if (!isLoading && !auth.uid) {
    return <Authentication />
  }

  // Authenticated Router
  if (isShipper) {
    const passProps = { user, organization }
    return <CustomerDashboard {...passProps} />
  }

  // TODO: Log error and placeholder page for user
  return <div>Unknown Redirect</div>
}
export default RedirectHandler

App:

// @flow
import React from 'react'
import useAuth from 'hooks/useAuth'
import RouteChangeListener from 'components/routeChangeListener'
import GlobalStyle from 'config/globalStyles'
import Segment from 'components/segment'
import { configureStore } from 'store'
import history from 'router/history'
import theme_default from 'config/theme/default'

// Components
import RedirectHandler from 'components/redirectHandler'
import Modal from 'views/modal'

// Providers
import { Provider } from 'react-redux'
import { Router } from 'react-router-dom'
import { ThemeProvider } from 'styled-components'
import AuthContext from 'contexts/auth'

// Dynamic Modules
import { DynamicModuleLoader } from 'redux-dynamic-modules'
import modalModule from 'store/modules/modal'
import navigationModule from 'store/modules/navigation'

const store = configureStore()

export const App = () => {
  const authState = useAuth()
  return (
    <Provider store={store}>
      <Router history={history}>
        <ThemeProvider theme={theme_default}>
          <DynamicModuleLoader modules={[modalModule(), navigationModule()]}>
            <AuthContext.Provider value={authState}>
              <Segment />
              <RouteChangeListener />
              <GlobalStyle />
              <RedirectHandler />
              <Modal />
            </AuthContext.Provider>
          </DynamicModuleLoader>
        </ThemeProvider>
      </Router>
    </Provider>
  )
}
export default App

[navneet-g]

@luskin can you provide version details of all packages you are using? You can remove any private packages.

[luskin]

@josepot To be clearer what I'm saying is that this problem occurs when the component has NO connected parents. Once we connect the parent component the updates are synced back up.

In my example code above the problem is solved by adding:

export const MSP = state => ({ user: state.user })
export default connect(MSP)(RedirectHandler)

to RedirectHandler

@navneet-g Sure thing, it's pretty simple so far since we are still in the early phases of the rebuild:

    "firebase": "^5.9.1",
    "flow-bin": "^0.95.1",
    "formik": "^1.5.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.23",
    "react": "^16.8.6",
    "react-detect-offline": "^2.1.2",
    "react-dom": "^16.8.5",
    "react-helmet": "^6.0.0-beta",
    "react-input-mask": "^2.0.4",
    "react-pose": "^4.0.8",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "^2.1.8",
    "redux": "^4.0.1",
    "redux-dynamic-modules": "^3.5.0",
    "redux-dynamic-modules-saga": "^3.5.0",
    "redux-saga": "^1.0.2",
    "styled-components": "^4.2.0",
    "use-onclickoutside": "^0.3.1",
    "yup": "^0.27.0"

^ we dropped react-redux back down to 6.0.1 to continue development

[josepot]

Thanks a lot @luskin for providing all those details. One last question: could you please share the content of your custom hook: useIdentificationProcess? If you can't, could you at least explain what is it that it's doing?

The reason why I'm asking is because it seems to me that this hook and the connect HOC are "competing" for passing down the same properties to CustomerDashboard. I'm worried about a possible "race condition", where one could be overriding the other. I hope that makes sense 🙂

[luskin]

@josepot I thought this too and refactored a version that did not pass the props down in this way, however it did not make any difference and so I reverted back to the cleaner (imo) implementation.

The issue exists whether or not useIdentificationProcess is in the component.

[navneet-g]

Good news ... I have a repro ... I will upload it to code sandbox or create a repo to share soon. I have not debugged it yet to see what might be happening.

[navneet-g]

Here is the repo with repro, the readme has repro steps
https://github.com/navneet-g/react-redux-beta-07-repro
And here is the codesandbox, the repro steps are same.
https://codesandbox.io/s/github/navneet-g/react-redux-beta-07-repro

[navneet-g]

Just to be sure ... I verified the same code base, with react-redux v6 and the issue does not repro, it tells me that the bug is related to react-redux beta or some where in integration :).

[navneet-g]

So far ... connectAdvanced dispatches following action, but the render method is not called on the component until next action is dispatched. Does this mean this is a bug in useReducer ?

[josepot]

Does this mean this is a bug in useReducer

I don't think so, because the render is being triggered. I think that the problem is that renderedChild is not being re-evaluated, because none of the dependencies of its useMemo hook have changed since the last render (in this case actualChildProps does not change). I think that this is the issue.