Skip to content

Component Life Cycle Methods

catmando edited this page Oct 27, 2015 · 4 revisions

React has a number of callbacks that you can define to hook into the component lifecycle. Reactive Record defines the same callbacks (with more rails-esque names) using the familiar active-record callback structure.

React Life Cycle Method Ruby Macro Name Called When
componentWillMount before_mount Invoked once, both on the client and server, immediately before the initial rendering occurs.

You have access to the params, and any state updates will be effective before rendering, so this is where any complex or instance specific state initialization should occur.
componentDidMount after_mount Invoked once, only on the client. immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The componentDidMount() method of child components is invoked before that of parent components.

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.
componentWillReceiveProps before_receive_props Invoked when a component is receiving new props. This method is not called for the initial render.
componentWillUpdate before_update Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render.
componentDidUpdate after_update Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated.
componentWillUnmount before_unmount Invoked immediately before a component is unmounted from the DOM.

Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount.

In addition between calls to before_receive_props and before_update the needs_update? method will be called if it is defined in the component class. If this method returns a non-nil value then the component will update (be re-rendered) otherwise rendering will be skipped. This is the equivalent of the react shouldComponentUpdate method.

Unlike React, Reactive Ruby will assume that components DO NOT update unless state, or params are explicitly changed. In react.js when an outer component re-renders, then all inner components will be re-rendered, and it is up to the component author to inspect the state, and param situation to determine if rendering should actually occur. This behavior is equivalent to using the React.js PureRenderMixin

In Reactive Ruby our experience has been it is much easier to write pure components (ones that only rerender when state or params explicitly change) because of the method provided to update state. If you need the standard React semantics simply define a should_update? method that always returns true.

Syntactic Example:

class FooBar
  include React::Component
  before_mount do # blocks may be attached directly to the macro
     puts "I am about to be mounted"
  end
  after_mount :start_timers # the instances start_timer method will be called
  def needs_update?
    true # just go ahead and update
  end
end
Clone this wiki locally