0

Before Hooks, with class based we used a lot render() and it did exactly what is says, compares the previous DOM with the current one, if they're different, React is going to re-render the component.

But now, with React Hooks, usually we only use return() to return things and also render, I'm right?

Is return() doing the same as render() did before Hooks? If not, which is the difference?

ncesar
  • 1,592
  • 2
  • 15
  • 34

1 Answers1

2

return() and render() are simply the same. If you write a component as function, you use return().

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

If you write a component as class, you use render().

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

However, in the past, you do you not have state/lifecycle method in a functional component. To solve that, React introduced Hooks. In the past you have to define state in constructor, now you define it in a function like this:

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
}

Also, you can have life cycle methods with hooks as mentioned in this this post

Andus
  • 1,713
  • 13
  • 30