A component may define lifecycle methods for each phase of the components lifecycle:
renderwill be called again here
All the Component Lifecycle methods (except
render) may take a block or the name(s) of instance method(s) to be called. The
rendermethod always takes a block.
class MyComponent < HyperComponent
# initialize stuff here
# return some elements
before_unmount :cleanup # call the cleanup method before unmounting
render, multiple lifecycle callbacks may be defined for each lifecycle phase, and will be executed in the order defined, and from most deeply nested subclass outwards. Note the implication that the callbacks are inherited, which can be useful in creating abstract component classes.
The lifecycle revolves around rendering the component. As the state or parameters of a component change, its render callback will be executed to generate the new HTML.
The render method may optionally take the container component and params:
render(DIV, class: 'my-class') do
which would be equivalent to:
DIV(class: 'my-class') do
Invoked once when the component is first instantiated, immediately before the initial rendering occurs. This is where state variables should be initialized.
This is the only life cycle callback run during
render_to_stringused in server side pre-rendering.
Invoked once, only on the client (not on the server during prerendering), 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
after_mountcallbacks of child components are invoked before that of parent components.
everymethods, or send AJAX requests, perform those operations in this callback. Attempting to perform such operations in before_mount will cause errors during prerendering because none of these operations are available in the server environment.
before_new_params do |new_params_hash|
Invoked when a component is receiving new params (React props). This method is not called for the initial render.
Use this as an opportunity to react to receiving new param values before
renderis called by updating any instance variables. The new_params block parameter contains a hash of the new values.
before_new_params do |next_params|
@likes_increasing = (next_params[:like_count] > like_count)
Note: There is no analogous method
before_receive_state. An incoming param may cause a state change, but the opposite is not true. If you need to perform operations in response to a state change, use
Invoked immediately before rendering when new params or state are being received.
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.
Invoked immediately before a component is unmounted from the DOM.
Perform any necessary cleanup in this method, such as cleaning up any DOM elements that were created in the
after_mountmethod. Note that periodic timers and broadcast receivers are automatically cleaned up when the component is unmounted.
These call backs occur before and after all renders (first and re-rerenders.) They provide no added functionality but allow you to keep your render methods focused on generating components.
force_update!is a component instance method that causes the component to re-rerender. This method is seldom (if ever) needed.
force_update!instance method causes the component to re-render. Usually this is not necessary as rendering will occur when state variables change, or new params are passed.