React 17: Nothing New?

Disclamer

This is a free translation of the original article from the official blog. Why free? Rather, because the original contains too much water and references to the reasons for certain decisions made in the past.

Nothing new?

The seventeenth release of React is unusual for the lack of new features and / or functionality. This release is focused on adding the ability to gradually update projects for the next major versions of the library in the future , which is relevant for projects with a large codebase.

Concurrent Mode 17 , , . () .

7 React " ". , . , - , , Context API, .

React 17 . React 17. .

: . . , (React 18, React 19), - lazy- React 17.

, (lazy-load) React. React 17.0.0-rc.0, , , React 16.8

React 17

, onClick, DOM-. document. , .

, , React , jQuery, . event.stopPropagation(): (propagation) , . React. Atom .

, document:

const rootNode = document.getElementById('root'); // <--  
ReactDOM.render(<App />, rootNode);

(SyntheticEvent Even Pooling)

17^- , .

function handleChange(event) {
  //    16 React    event.persist()
  setData(data => ({
    ...data,
    // This crashes in React 16 and earlier:
    text: event.target.value
  }));
}

, event.persist()

. Facebook . , - !

. React .

• onScroll , ;

• onFocus onBlur " " focusin focusout;

• onClickCapture Capture- .

useEffect()

useEffect(() => {
  // This is the effect itself.
  return () => {
    // This is its cleanup.
  };
});

, , componentWillUnmount(), , , , , .

, - useLayoutEffect(), .

undefined

, .

undefined , React.forwardRef React.memo.

let Button = forwardRef(() => {
  // We forgot to write return, so this component returns undefined.
  // React 17 surfaces this as an error instead of ignoring it.
  <button />;
});

let Button = memo(() => {
  // We forgot to write return, so this component returns undefined.
  // React 17 surfaces this as an error instead of ignoring it.
  <button />;
});

, stack trace . , , .

, Button , React- .

17^- React , React-, , production-.

— , . , React Native for Web , .

17^- React . - , , .

ReactTestUtils.SimulateNative . , .

Changelog

, , .

The new version of React also includes 5 changes in React, 37 changes in React Dom, a couple of changes in React DOM Server, one change in React Test Rerender.

What about Concurrent Mode?

This mode is still experimental. In the 17 ^th React been fixed many bugs, removed some unstable_methods, and added new ones. While it is too early to use it for production, it is definitely possible and necessary to poke it. For example, there is a library for working with Firebase, reactfire , the developers of which made the main version dependent on Concurrent Mode. Unfortunately the repository seems to be abandoned for the past few months. Hope this gets fixed.