React: Bug: Event object properties are null within setState callback function

[gfranko]

The event object seems to lose all property values within the setState() callback function. Here is a jsfiddle demonstrating the behavior.

    onClick: function(ev) {
        console.log('ev.currentTarget is defined here: ', ev.currentTarget);
        this.setState( { test : false }, function () {
          console.log('ev.currentTarget is null here: ', ev.currentTarget);
        });
    },

[zpao]

Events are pooled so we wipe out their values. If you want to use the event outside the current event loop then you need to call ev.persist() which will pull that event out of the pooling.

You'll note the same thing if you console.log(ev) in onClick. The properties are all nulled out.

We've talked about this before (I don't have the other issues handy) but we don't talk about it on the website. We probably should.

[gfranko]

Thanks @zpao , I really appreciate the explanation. After using ev.persist(), I still noticed that ev.currentTarget was null (although most of the other properties are kept intact). Is there any reason for this? Here is my updated jsfiddle.

[bloodyowl]

you can use event.target instead of event.currentTarget

[gfranko]

event.target and event.currentTarget are different

[bloodyowl]

yup, sorry, I misread and assumed it was input related events which makes them the same as they're the deepest children.

[gfranko]

Created a new ticket. #2857

[seanodell]

Calling persist() doesn't always solve the problem: https://github.com/facebook/react/issues/2857

This is quite a rabbit hole. My handler is wrapped in useRef, because functional component. Wrapped in lodash.debounce, because re-rendering functional component. Calling persist(), because event pooling. Now, after all that, I think I will have to pass the property anyway, because event bubbling.

I realize there are good reasons for each one of these hoops I have to jump, but I feel like the question is simply: "How do I pass the full event to a handler without bouncing in a functional component?" and that there is no straight answer. I think this is a common, critical use case for anyone writing React functional components and should be addressed directly somehow with a solution that's becomes the standard for all event handling in function components.

For now, I am going to avoid this trainwreck and just pass properties to the handler.