What's new in React 16

Agata Krzywda

Software Engineer at Lloyds Banking Group

Free React Courses

New features of React 16

• Error handling
• Render array, string, numbers
• Custom DOM attributes
• Improved server-side rendering
• Update State

Error Handling

class ErrorBoundary extends Component {

    state = { hasError: '' };

    componentDidCatch(error, info) {
        this.setState({ hasError: error.message });
    }

    render() {
        if (this.state.hasError) {
            return (
              <h1>Something went wrong: {this.state.hasError}</h1>
            );
        }

        return this.props.children;
    }
}

const Profile = ({userName}) => {
    if (userName === 'noname') {
        throw new Error('Wrong name for user!');
    }

    return <h1>Name: {userName}</h1>
};

const Age = ({age}) => {
    if (!age) {
        throw new Error('Wrong age for user!');
    }

    return <h1>Age: {age}</h1>
};

class App extends Component {
    state = {
       userName: "",
       age: 27
    };

    onChange = (e) => {
        this.setState({userName: e.target.value});
    };
    onHandleButton = () => {
        this.setState({age: null})
    }

    render() {
        return (
            <div>
                <ErrorBoundary>
                    <input type="text"
                      value={this.state.userName}
                      onChange={this.onChange} />
                    <Profile userName={this.state.userName} />
                </ErrorBoundary>
                <ErrorBoundary>
                    <Age age={this.state.age}/>
                    <button onClick={this.onHandleButton}>Change Age</button>
                </ErrorBoundary>
            </div>
        );
    }
}

Render Multiple Elements

class MyArrayComponent extends React.Component 
render() {
  return [
    <li key="one">First item</li>,
    <li key="two">Second item</li>,
    <li key="three">Third item</li>,
    <li key="four">Fourth item</li>,
  ];
}

Render String and Numbers

class MyStringComponent extends Component {
  render() {
    return "hey there";
  }
}
class MyNumberComponent extends Component {
  render() {
    return 2;
  }
}
const App = () =>  {
    return 'Hello World!!!'
}

Update State

class App extends Component {

  state = { city: 'London' };

  selectCity = evt => {
    const newValue = evt.target.value;
    this.setState(state => {
      if (state.city === newValue) {
        //return null what stop rerender
        return null;
      }
      return {
        city: newValue
      };
    });
  };

  render() {
    return (
      <div>
        <button type="button" value="london" onClick={this.selectCity}>
          London
        </button>
        <button type="button" value="paris" onClick={this.selectCity}>
          Paris
        </button>
        <City name={this.state.city} />
      </div>
    );
  }
}

Define DOM Attributes

class App extends React.Component {
  render() {
    return (
      <div
        my-attribute="foo"
        class="bar"
      >
        Hello!
      </div>
    );
  }
}

Resources

Leverage New Features of React 16 - Egghead online course by Nik Graf

What’s New With Server-Side Rendering in React 16 - www.hackernoon.com by Sasha Aickin