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.

React Can component mutates Ability handler array when events are fired

See original GitHub issue

When the ability object is updated the ‘emit’ method is fired and there is a foreach over all the attached handlers for the particular event. See here.

The problem is, the React Can component attaches a handler that calls ‘forceUpdate’ which forces a render and the render method removes the old handler and attaches a new one subsequently mutating the handler array.

A quick fix would be to change the line to the following handlers.map(h => h).forEach(handler => handler(payload));

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
stalniycommented, Feb 16, 2019

fixed in

  • @casl/abiliry@3.0.1
  • @casl/react@1.0.2
0reactions
richard-vccommented, Feb 17, 2019

Nice one. Thanks for the quick fix 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

React.Component
Each component has several “lifecycle methods” that you can override to run code ... Arrays and fragments. ... Binding event handler methods to...
Read more >
How To Handle DOM and Window Events with React
In React apps, you can use event handlers to update state data, trigger prop changes, or prevent default browser actions. To do this,...
Read more >
When does React re-render after a setState call made inside ...
React batches all setStates done during a React event handler, and applies them just before exiting its own browser event handler. Share.
Read more >
React interactivity: Events and state - Learn web development
Instead, we can write a function in <App /> that will expect some data from our form as an input, then pass that...
Read more >
Working with App State and Event Listeners in React Native
But when do these “changes” actually occur? Let's examine this next in order to understand exactly when these events are firing. When AppState ......
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