React class component

Is it okay to write class component like this? Is there any way i can refactor it?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name || "Anonymous",
    };
  }
  render() {
    return <p>Hello {this.state.name}</p>;
  }
}

Syntactically the class is correct.

However you should avoid copying props to state. There’s an in-depth explanation on the React Blog here:

You probably don’t need derived state

Since the component is receiving its name as prop, it’s no use for it to be an internal state, so you should just render the prop instead.

1 Like