Controlled components in Crank

[ryhinchey]

Anyone coming from React is familiar with controlled components.

As I was working through building the thinkster realworld demo, I was able to remove the value bindings from the inputs and let the browser do its thing :) In addition, I didn't need to call this.refresh after updating the email and password values since I didn't have to re-render the UI.

I'm wondering if I'm missing something? If not, I think we should add a "controlled components" section to the docs as it's a breath of fresh air

Demo Login Form: https://codesandbox.io/s/busy-haze-ypse4?file=/src/index.js

function* Login() {
  let email = "";
  let password = "";

  const onEmailChange = e => {
    email = e.target.value;
  };

  const onPasswordChange = e => {
    password = e.target.value;
  };

  const onSubmit = e => {
    e.preventDefault();
    console.log(email, password);
  };

  while (true) {
    yield (
      <form onsubmit={onSubmit}>
        <input type="email" placeholder="Email" oninput={onEmailChange} />
        <input
          type="password"
          placeholder="Password"
          oninput={onPasswordChange}
        />
        <button type="submit">Sign in</button>
      </form>
    );
  }
}

[ryhinchey]

So FWIW I don't need to use a generator here if I don't expect this component to render after the first yield. The generator brings value if I want to safely maintain the email and password values as state over subsequent updates to the component (like prop updates).

While this works in React land, you never do it because those values aren't state and get blown away on every re-render.

[ryhinchey]

it's not a bug in Crank. Here's the login form for the realworld example app. If I didn't add value={email} to the email input, I wouldn't be able to set the input to an empty string after a login error.

import { createElement } from '@bikeshaving/crank';
import { Link } from './Router';
import ListErrors from './ListErrors';
import api from '../api';


function* Login() {
  let inProgress = false;
  let email = '';
  let password = '';
  let errors;

  const onEmailChange = e => {
    email = e.target.value;
  }

  const onPasswordChange= e => {
    password = e.target.value;
  }

  const onSubmit = async e => {
    e.preventDefault();
    const authResponse = await api.Auth.login(email, password);
    if (authResponse.errors) {
      errors = authResponse.errors;
      email = '';
      password = '';
      return this.refresh();
    }

    this.dispatchEvent('login', new CustomEvent('login', {bubbles: true, detail: { authResponse }}))
  }

  while (true) {
    yield (
      <div class="auth-page">
        <div class="container page">
          <div class="row">
            <div class="col-md-6 offset-md-3 col-xs-12">
              <h1 class="text-xs-center">Sign In</h1>
              <p class="text-xs-center">
                <Link href="/register">
                  Need an account?
                </Link>
              </p>
              <ListErrors errors={errors} />
              <form onsubmit={onSubmit}>
                <fieldset>
                  <fieldset class="form-group">
                    <input
                      class="form-control form-control-lg"
                      type="email"
                      placeholder="Email"
                      oninput={onEmailChange}
                      value={email}
                    />
                  </fieldset>
                  <fieldset class="form-group">
                    <input
                      class="form-control form-control-lg"
                      type="password"
                      placeholder="Password"
                      oninput={onPasswordChange}
                      value={password}
                    />
                  </fieldset>
                  <button
                    class="btn btn-lg btn-primary pull-xs-right"
                    type="submit"
                    disabled={inProgress}>
                    Sign in
                  </button>
                </fieldset>
              </form>
            </div>

          </div>
        </div>
      </div>
    );
  }
}
export default Login;

[brainkim]

Right that seems to be working as I would expected. The uncontrolled part happens because you don’t update the component, which is really difficult with React because it’s constantly updating your components when you might not expect.

[ryhinchey]

right - I'm finding this flow very linear and clear :)

[brainkim]

I’m thinking about changing this logic slightly for the 0.2.0 for performance reasons. Other frameworks assume that the props are the source of truth, and therefore can do an optimization where you check if the old value and new value are the same to avoid unnecessary DOM mutations. Crank can’t do that because we assume the DOM may have been changed in between. We could check directly against the DOM but that would be a cost in and of itself. What I’m thinking is, what if we said all controlled stuff is handled by props, and uncontrolled stuff is handled by diret DOM manipulations? So if you use the prop, you have to use the declarative form and manually refresh the component whenever you change your inputs, and if you want uncontrolled forms, you just store the DOM nodes and manually set their value properties when you need to. I dunno, just some thinking I’m doing.

[brainkim]

Alternatively, we could treat input values as special and make sure they’re always updated...