Make hooks API more obvious

[0e39bf7b]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

Hooks were introduced in React 16.8. It's interesting feature which allows use state and other React features without writing a class, but unfortunately it's very difficult to understand. When I see a class component I understand that React creates instance of this class which holds some state and React calls lifecycle methods in different situations during mounting, props changing and unmounting. It makes me write a bit more code but all this code is verbose and easy to understand if you know some basic (not React-specific) JavaScript conceptions. It is said in Hooks documentation:

In addition to making code reuse and code organization more difficult, we’ve found that classes can be a large barrier to learning React. You have to understand how this works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers.

Yes, all of these facts are possible. You have to understand how JavaScript works if you want to use it to build programs. Yes, JavaScript Object Model differs from the other languages like C++ or Java. But I think it's fair enough: if you want to use JavaScript you need to understand how it works. E.g. if you want to write iOS native programs with Objective C you have to understand now reference counting works and it's OK. A lot of well known projects like mocha or jQuery uses this concept.

Of course you can use another approach and write code in functional way when you have strict separation between data and functions processing this data. In this case function receives data as a parameters, process it and return new date. It's also OK.

But when you try to mix stateful components and pure functions without closures to store some state it makes code very tricky.

Last few months a lot of people have told me that Hooks are awesome and it's easier to understand than class components and shows me examples like this:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

But when I asked about how this example works almost none of them answered. Why first Example is called useState returns 0 and second one - 1? This function is called with no parameters 2 times and returns different results. I see no closure. How does it work? How can I test it without some special React magic? How can I emulate the second call without the first one? Where is the state actually stored? You have to understand React sources deeply to answer all these questions.

The only possibility to implement useState is a global variable inside React and there are a lot of articles on the Internet that global variables are very fragile approach and if you can avoid using it - it's better to avoid it.

I have a big code base and it's very important to understand which component has it's own state and which does not. Before React 16.8 it was clear: functional components do not have own state and class components have but now there is no strict border and any functional component can be stateful. This makes it more difficult to refactor code base.

What is the expected behavior?

If I call function with particular parameters twice I receive the same results. useState and other Hooks do not have such behavior. I think it's possible to make hooks more obvious if there will be explicit parameter context:

import React, { useState } from 'react';

function Example(context) {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(context, 0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React will provide context to functional components and it will be clear how useState works without looking throw source codes of React. Also it will be easier to refactor and test such code.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

[bvaughn]

Hi @0e39bf7b 👋

GitHub issues on this repo are probably best used for reporting bugs or requesting small features. A high level, backwards breaking change like the one you've proposed should go through our RFC process:
https://github.com/reactjs/rfcs

[0e39bf7b]

@bvaughn OK, I'll try, thanks!

[bvaughn]

No problem! I'm going to go ahead and close this issue then. Next step would be to open an RF. :)