Lifecycle Methods
A component may define lifecycle methods for each phase of the components lifecycle:
before_mount
render
after_mount
before_new_params
before_update
render
will be called again hereafter_update
before_unmount
All the Component Lifecycle methods (except
render
) may take a block or the name(s) of instance method(s) to be called. The render
method always takes a block.class MyComponent < HyperComponent
before_mount do
# initialize stuff here
end
render do
# return some elements
end
before_unmount :cleanup # call the cleanup method before unmounting
...
end
Except for
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.
render do
...
end
The render method may optionally take the container component and params:
render(DIV, class: 'my-class') do
...
end
which would be equivalent to:
render do
DIV(class: 'my-class') do
...
end
end
before_mount do
...
end
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_string
used in server side pre-rendering.after_mount do
...
end
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_mount
callbacks of child components are invoked before that of parent components.If you want to integrate with other JavaScript frameworks, set timers using the
after
or every
methods, 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|
...
end
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
render
is 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)
end
Note: There is no analogous methodbefore_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, usebefore_update
.
before_update do
...
end
Invoked immediately before rendering when new params or state are being received.
after_update do
...
end
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.
before_unmount do
...
end
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_mount
method. 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.The
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.Last modified 2yr ago