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.

Component not aware of state change?

See original GitHub issue

I’ve been fighting this all day today. Im new to Java/TypeScript world, React world and Redux world and I was pretty sure that I messed something up… until I tried doing the same with React-Redux (7.0.0.beta-1) and it turned out it works there!

Im writing a authorization flow with redux-saga - so this example that Im going to show you is just massively simplified code similar to mine. CodeSandboxes below.

Description: TOGGLE button dispatches an action that is caught by redux-saga. The Saga dispatches an action to toggle a value to true, wait 10ms, and then dispatches another action to toggle value back to false. Meanwhile the button is disabled if value === true, and there is a value ? 'ON' : 'OFF' text. Interestingly if you increase delay() value to (for example) 50ms it works!

How does it look like:

  • using react-redux 7.0.0-beta.1 (good!) react-redux

  • using reactive-react-redux 1.8.0 (bad!) reactive-react-redux

This was shot on MacOs 10.14.4 and Safari 12.1. I have tested this also on:

  • iOS: latest Safari, latest Chrome and latest Firefox. Results are the same, although on Firefox sometimes I had to click “toggle button” couple of times to “achieve” this issue.
  • MacOs: latest Chrome, latest Firefox. On Firefox and Chrome sometimes it needs couple of clicks to get there.

Check out these codesandboxes:

I dropped on this issue by accident. In my original code the delay function is just a Api call. This Api call had a wrong port number set so it got Connection refused and returned immediately. TURN_ON and TURN_OFF was just a isLoading indicator that disabled a Login button.

@dai-shi Im totally blown away by Your work on reactive-react-redux and @theKashey 's proxyequal. I follow every discussion, every benchmark test and commits to this repo and wish I would understand enough of it to be able to help…

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:29 (13 by maintainers)

github_iconTop GitHub Comments

1reaction
mrGibicommented, Apr 7, 2019

Ok, both examples are working now. Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

React component not re-rendering on state change
I'd like to add to this the enormously simple, but oh so easily made mistake of writing: this.state.something = 'changed'; ... and then...
Read more >
Components not re-rendering with state changes : r/react
Sometimes when I'm building more complex components structures, I'll have a component that doesn't automatically re-render when its state ...
Read more >
When does React re-render components? - Felix Gerschau
Changing the state means that React triggers an update when we call the setState function (in React hooks, you would use useState )....
Read more >
React re-renders guide: everything, all at once - Developer way
There are four reasons why a component would re-render itself: state changes, parent (or children) re-renders, context changes, and hooks ...
Read more >
react component not rendering on state change - You.com
React only triggers a re-render if you use setState to update the state. Open side panel. Map of React Components not re rendering...
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