State Handling Performance Speedup

[catmando]

Group all state updates in a given render cycle together

module React
  class State
    def self.set_state(object, name, value, delay=true)
      states[object][name] = value
      if delay || @bulk_update_flag
        @delayed_updates ||= Hash.new { |h, k| h[k] = {} }
        @delayed_updates[object][name] = [value, Set.new]
        @delayed_updater ||= after(0.0) do
          delayed_updates = @delayed_updates
          @delayed_updates = Hash.new { |h, k| h[k] = {} } # could this be nil???
          @delayed_updater = nil
          updates = Hash.new { |hash, key| hash[key] = Array.new }
          delayed_updates.each do |object, name_hash|
            name_hash.each do |name, value_and_set|
              set_state2(object, name, value_and_set[0], updates, value_and_set[1])
            end
          end
          updates.each { |observer, args| observer.update_react_js_state(*args) }
        end
      elsif @rendering_level == 0
        updates = Hash.new { |hash, key| hash[key] = Array.new }
        set_state2(object, name, value, updates)
        updates.each { |observer, args| observer.update_react_js_state(*args) }
      end
      value
    end
  end
end

[zetachang]

Is this already on master? https://github.com/ruby-hyperloop/hyper-react/blob/master/lib/react/state.rb#L84

[catmando]

Might be! I couldn't find the issue. Note that the default on the second parameter is now true. That makes a huge difference

[zetachang]

Ok, I see. The change is actually introduced by https://github.com/ruby-hyperloop/hyper-react/issues/178

[janbiedermann]

this doesnt work as expected with react, react seems unable to group setState calls outside of a render cycle. Preact can do this, maybe react 16 will improve this during its dot releases. However, this can be achieved in React with: ReactDOM.unstable_batchedUpdates(), which, as the name suggests, is kinda unstable. Needs watching and adoption. If this a performance issue for somebody, i recommend to try with Preact. As of lap20 state handling improved anyway, setting state synchronously where allowed.