Drop old state updates

Summary:
Changelog: [internal]

Components can update state multiple times before the state update queue is flushed. This causes unnecessary layout/diff and mount passes. To solve this, drop stale state updates inside `stateUpdateQueue_ ` for specific `ShadowNodeFamily`.

Delivering stale status updates is redundant. Let's take SafeAreaView as an example. It schedules 5-6 state updates before `stateUpdateQueue_` is flushed. That's unnecessary work blocking JS thread. We only care about the latest state update. Same for TextInput and other components using state updates.

Reviewed By: JoshuaGross

Differential Revision: D23987707

fbshipit-source-id: 2e3f92cc93af61d78ac564aa40aef165af64b8c1

ReactCommon/react/renderer/core/EventQueue.cpp

@@ -8,6 +8,7 @@
 #include "EventQueue.h"
 
 #include "EventEmitter.h"
+#include "ShadowNodeFamily.h"
 
 namespace facebook {
 namespace react {
@@ -35,6 +36,12 @@ void EventQueue::enqueueEvent(const RawEvent &rawEvent) const {
 void EventQueue::enqueueStateUpdate(const StateUpdate &stateUpdate) const {
   {
     std::lock_guard<std::mutex> lock(queueMutex_);
+    if (!stateUpdateQueue_.empty()) {
+      auto const position = stateUpdateQueue_.back();
+      if (stateUpdate.family == position.family) {
+        stateUpdateQueue_.pop_back();
+      }
+    }
     stateUpdateQueue_.push_back(stateUpdate);
   }