# Lifecycle

[![GitHub stars](https://img.shields.io/github/stars/hopsoft/stimulus_reflex?style=social)](https://github.com/hopsoft/stimulus_reflex) [![GitHub forks](https://img.shields.io/github/forks/hopsoft/stimulus_reflex?style=social)](https://github.com/hopsoft/stimulus_reflex) [![Twitter follow](https://img.shields.io/twitter/follow/hopsoft?style=social)](https://twitter.com/hopsoft)

StimulusReflex supports 4 lifecycle events.

1. **`before`** - prior to sending a stimulate request over the web socket
2. **`success`** - after the server side reflex succeeds and the DOM has been updated
3. **`error`** - whenever the server side reflex raises an error
4. **`after`** - after both `success` and `error`

{% hint style="info" %}
**Using the lifecycle is not a requirement.** Think of it as a power tool that will help you build more sophisticated applications.
{% endhint %}

## Quick Start

Simply declare lifecycle methods in your StimulusReflex controller.

{% code title="app/views/examples/show\.html.erb" %}

```
<a href="#"
   data-controller="example"
   data-reflex="click->ExampleReflex#update">
```

{% endcode %}

{% code title="app/javascript/controllers/example\_controller.js" %}

```javascript
import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'

export default class extends Controller {
  connect () {
    StimulusReflex.register(this)
  }

  beforeUpdate() {
    // show spinner
  }

  afterUpdate() {
    // hide spinner
  }
}
```

{% endcode %}

{% hint style="danger" %}
The methods `beforeUpdate` and `afterUpdate` use a naming convention that matches their suffix to the reflex method name `ExampleReflex#update`
{% endhint %}

## Generic Lifecycle Methods

StimulusReflex controllers can define 4 generic lifecycle methods which provide a simple way to hook into descendant reflexes.

1. `beforeReflex`
2. `reflexSuccess`
3. `reflexError`
4. `afterReflex`

{% code title="app/views/examples/show\.html.erb" %}

```
<div data-controller="example">
  <a href="#" data-reflex="ExampleReflex#update">Update</a>
  <a href="#" data-reflex="ExampleReflex#delete">Delete</a>
</div>
```

{% endcode %}

{% code title="app/javascript/controllers/example\_controller.js" %}

```javascript
import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'

export default class extends Controller {
  connect () {
    StimulusReflex.register(this)
  }

  beforeReflex(anchorElement) {
    const { reflex } = anchorElement.dataset
    if (reflex.match(/update$/)) anchorElement.innerText = 'Updating...'
    if (reflex.match(/delete$/)) anchorElement.innerText = 'Deleting...'
  }
}
```

{% endcode %}

## Custom Lifecycle Methods

StimulusReflex controllers can define 4 custom lifecycle methods for each descendant reflex. These methods use a naming convention based on the reflex. For example, the reflex `ExampleReflex#update` will produce the following lifecycle methods.

1. `beforeUpdate`
2. `updateSuccess`
3. `updateError`
4. `afterUpdate`

{% code title="app/views/examples/show\.html.erb" %}

```
<div data-controller="example">
  <a href="#" data-reflex="ExampleReflex#update">Update</a>
  <a href="#" data-reflex="ExampleReflex#delete">Delete</a>
</div>
```

{% endcode %}

{% code title="app/javascript/controllers/example\_controller.js" %}

```javascript
import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'

export default class extends Controller {
  connect () {
    StimulusReflex.register(this)
  }

  beforeUpdate(anchorElement) {
    anchorElement.innerText = 'Updating...'
  }

  beforeDelete(anchorElement) {
    anchorElement.innerText = 'Deleting...'
  }
}
```

{% endcode %}

{% hint style="info" %}
**It's not required to implement all lifecycle methods.** Pick and choose which lifecycle methods makes sense for your application.
{% endhint %}

## Conventions

### Method Names

Lifecycle methods apply a naming convention based on the reflex. For example, the reflex `ExampleReflex#do_stuff` will produce the following lifecycle methods.

1. `beforeDoStuff`
2. `doStuffSuccess`
3. `doStuffError`
4. `afterDoStuff`

### Method Signatures

Both generic and custom lifecycle methods share the same function arguments.

* `beforeReflex(element)`  **element** - the element that triggered the reflex
* `reflexSuccess(element)` **element** - the element that triggered the reflex
* `reflexError(element, error)` **element** - the element that triggered the reflex **error** - the error message
* `afterReflex(element, error)` **element** - the element that triggered the reflex **error** - the error message if an error occurred, otherwise `null`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://andrewmcodes.gitbook.io/test/lifecycle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.