New Features

Python 3.12 is now supported

by @masenf in https://github.com/reflex-dev/reflex/pull/2006

Next.js upgrade from 13 to 14

by @Lendemor in https://github.com/reflex-dev/reflex/pull/2142

Clear Form using reset_on_submit prop

You can use the reset_on_submit on a form to reset form values to their original states after submitting the form. Simply set the value to True.

rx.form(
    rx.input(id="text", placeholder="text"),
    rx.button("Submit", type_="submit"),
    reset_on_submit=True,
)

(by @masenf in https://github.com/reflex-dev/reflex/pull/2012)

Forms support dynamic names.

• Dynamic refs / ids don't really work but you can use dynamic names instead

  rx.form(
      rx.vstack(
          rx.input(name="name_input"),
          rx.hstack(rx.pin_input(length=4, name="pin_input")),
          rx.number_input(name="number_input"),
          rx.checkbox(name="bool_input"),
          rx.switch(name="bool_input2"),
          rx.slider(name="slider_input"),
          rx.range_slider(name="range_input"),
          rx.radio_group(["option1", "option2"], name="radio_input"),
          rx.select(["option1", "option2"], name="select_input"),
          rx.text_area(name="text_area_input"),
          rx.input(
              name="debounce_input",
              debounce_timeout=0,
              on_change=rx.console_log,
          ),
          rx.button("Submit", type_="submit"),
      ),
  ),
  

• Use rx.Var.range (similar to python’s range ) with rx.foreach to dynamically create form elements with dynamic names. rx.Var.range(v1, v2, step) takes in start, end and step values which should be integers or Var integers.

  class State:
      grid: int = 4
  
      def handle_submit(self, form_data: dict):
          print(form_data)
  
  rx.form(
      rx.responsive_grid(
          rx.foreach(
              rx.Var.range(State.grid),
              lambda i: rx.foreach(
                  rx.Var.range(State.grid),
                  lambda j: rx.input(
                      name=f"grid_{i}_{j}",
                      placeholder=f"grid {i} {j}",
                      key=f"{i}_{j}",
                      width="4em",
                  ),
              ),
          ),
          columns=[State.grid],
      ),
      rx.button("Submit", type_="submit"),
      reset_on_submit=True,
      on_submit=State.handle_submit,
  ),
  

New form-based code should prefer to use the name attribute to avoid the overhead of using refs for no specific gain (unless focus or value setting is required).

(by @masenf in https://github.com/reflex-dev/reflex/pull/2012)

Improvements

• Assume secure protocol (wss://) and no port If the frontend is being accessed via HTTPS and the API_URL is either localhost, 0.0.0.0 or :: and uses a non-secure protocol by @masenf in https://github.com/reflex-dev/reflex/pull/2129
• Reduce Syntax highlighter footprint by @ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2037
• Lazy import modules in reflex by @picklelo in https://github.com/reflex-dev/reflex/pull/2144

Doc fixups

• fix: grammatical errors & typo in Spanish [readme.md](http://readme.md/) by @cllatser in https://github.com/reflex-dev/reflex/pull/2139
• docs: remove duplicated content in [CONTRIBUTING.md](http://contributing.md/) by @Jaspreet-singh-1032 in https://github.com/reflex-dev/reflex/pull/2152
• docs: revise typo in korean README and common CONTRIBUTING readme by @young-hun-jo in https://github.com/reflex-dev/reflex/pull/2160

Bug Fixes

• fix an issue where some fields in State.router.headers were not getting updated by @Lendemor in https://github.com/reflex-dev/reflex/pull/2133
• Resolve peer dependency conflict causing package-lock.json to relock on every run by @ElijahAhianyo in https://github.com/reflex-dev/reflex/pull/2106

Other Changes

• Add benchmarking by @Alek99 in https://github.com/reflex-dev/reflex/pull/2143

New Contributors

• @cllatser made their first contribution in https://github.com/reflex-dev/reflex/pull/2130
• @Jaspreet-singh-1032 made their first contribution in https://github.com/reflex-dev/reflex/pull/2152
• @young-hun-jo made their first contribution in https://github.com/reflex-dev/reflex/pull/2160

Full Changelog: https://github.com/reflex-dev/reflex/compare/v0.3.2...0.3.3