japgolly.scalajs.react.component.builder.Builder
Step4
Related Doc:
package Builder
This is the end of the road for this component builder.
This is the end of the road for this component builder.
Your brand-new, spanking, ScalaComponent. Mmmmmmmm, new-car smell.
Error boundaries are React components that catch errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
Error boundaries are React components that catch errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
Note: "CHILD COMPONENT TREE". Components cannot catch errors in themselves, only their children.
Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point
in the lifecycle, the component has a DOM representation which you can access via ReactDOM.findDOMNode(this).
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.
Invoked immediately after the component's updates are flushed to the DOM.
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 once, both on the client and server, immediately before the initial rendering occurs.
Invoked once, both on the client and server, immediately before the initial rendering occurs.
If you call setState within this method, render() will see the updated state and will be executed only once
despite the state change.
Invoked when a component is receiving new props.
Invoked when a component is receiving new props. This method is not called for the initial render.
Use this as an opportunity to react to a prop transition before render() is called by updating the state using
this.setState(). The old props can be accessed via this.props. Calling this.setState() within this function
will not trigger an additional render.
Note: There is no analogous method componentWillReceiveState. An incoming prop transition may cause a state
change, but the opposite is not true. If you need to perform operations in response to a state change, use
componentWillUpdate.
Invoked immediately before a component is unmounted from the DOM.
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.
Invoked immediately before rendering when new props or state are being received.
Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render.
Use this as an opportunity to perform preparation before an update occurs.
Note: You *cannot* use this.setState() in this method. If you need to update state in response to a prop change,
use componentWillReceiveProps instead.
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates.
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return Some to update the state, or None to update nothing.
This method exists for rare use cases where the state depends on changes in props over time. For example, it might be handy for implementing a Transition component that compares its previous and next children to decide which of them to animate in and out.
Deriving state leads to verbose code and makes your components difficult to think about. Make sure you’re familiar with simpler alternatives:
Note that this method is fired on every render, regardless of the cause. This is in contrast to componentWillReceiveProps, which only fires when the parent causes a re-render and not as a result of a local setState.
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates.
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return Some to update the state, or None to update nothing.
This method exists for rare use cases where the state depends on changes in props over time. For example, it might be handy for implementing a Transition component that compares its previous and next children to decide which of them to animate in and out.
Deriving state leads to verbose code and makes your components difficult to think about. Make sure you’re familiar with simpler alternatives:
Note that this method is fired on every render, regardless of the cause. This is in contrast to componentWillReceiveProps, which only fires when the parent causes a re-render and not as a result of a local setState.
getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g.
getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate().
This use case is not common, but it may occur in UIs like a chat thread that need to handle scroll position in a special way.
getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g.
getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate().
This use case is not common, but it may occur in UIs like a chat thread that need to handle scroll position in a special way.
Invoked before rendering when new props or state are being received.
Invoked before rendering when new props or state are being received. This method is not called for the initial
render or when forceUpdate is used.
Use this as an opportunity to return false when you're certain that the transition to the new props and state
will not require a component update.
If shouldComponentUpdate returns false, then render() will be completely skipped until the next state change.
In addition, componentWillUpdate and componentDidUpdate will not be called.
By default, shouldComponentUpdate always returns true to prevent subtle bugs when state is mutated in place,
but if you are careful to always treat state as immutable and to read only from props and state in render()
then you can override shouldComponentUpdate with an implementation that compares the old props and state to their
replacements.
If performance is a bottleneck, especially with dozens or hundreds of components, use shouldComponentUpdate to
speed up your app.
Invoked before rendering when new props or state are being received.
Invoked before rendering when new props or state are being received. This method is not called for the initial
render or when forceUpdate is used.
Use this as an opportunity to return false when you're certain that the transition to the new props and state
will not require a component update.
If shouldComponentUpdate returns false, then render() will be completely skipped until the next state change.
In addition, componentWillUpdate and componentDidUpdate will not be called.
By default, shouldComponentUpdate always returns true to prevent subtle bugs when state is mutated in place,
but if you are careful to always treat state as immutable and to read only from props and state in render()
then you can override shouldComponentUpdate with an implementation that compares the old props and state to their
replacements.
If performance is a bottleneck, especially with dozens or hundreds of components, use shouldComponentUpdate to
speed up your app.
You're on the final step on the way to building a component.
This is where you add lifecycle callbacks if you need to.
When you're done, simply call
.buildto create and return yourScalaComponent.