What's the difference between these two implementations of a React Component?

Question

I was following this tutorial this tutorial where he uses this kind of Component declaration which I find peculiar (for a newbie in React)

const Story = ({ story, columns, onArchive }) => {
  const {
    title,
    url,
    author,
    comments,
    points,
    objectID,
  } = story;

  return (
    <div className="story">
      <span style={{ width: columns.title.width }}><a href={url}>{title}</a></span>
      <span style={{ width: columns.author.width }}>{author}</span>
      <span style={{ width: columns.comments.width }}>{comments}</span>
      <span style={{ width: columns.points.width }}>{points}</span>
      <span style={{ width: columns.archive.width }}>
        <ButtonInline onClick={() => onArchive(objectID)}>Archive</ButtonInline>
      </span>
    </div>
  );
}

Basically he has the component in a function that doesn't have a render function -- just straight up return.

Out of curiosity, I recreated it using the more familiar approach:

class Story extends React.Component {
  render() {
    const {
      title,
      url,
      author,
      comments,
      points,
      objectID,
    } = this.props.story;

    return(
      <div className="story">
      <span style={{ width: this.props.columns.title.width }}><a href={url}>{title}</a></span>
      <span style={{ width: this.props.columns.author.width }}>{author}</span>
      <span style={{ width: this.props.columns.comments.width }}>{comments}</span>
      <span style={{ width: this.props.columns.points.width }}>{points}</span>
      <span style={{ width: this.props.columns.archive.width }}>
        <ButtonInline onClick={() => this.props.onArchive(objectID)}>Archive</ButtonInline>
      </span>
    </div>);
  }
}

and it renders the same.

Now, I wonder the following:

Does the former implementation accept states? If so, how would one code the constructor and the state declaration?
Is it more efficient than the latter? It certainly looks more concise and straight to the point, but what are the pros and cons of this coding style?
What is it called? I'd love to read more about this.

Thanks!

You may have a lot of answers to this question here. But my suggestion is that you go through the react official docs. They have the first chapters that explain actually differences between class components and functional components — quirimmo, Dec 25 '18 at 06:12
See https://stackoverflow.com/questions/38926574/react-functional-components-vs-classical-components — Ana Liza Pandac, Dec 25 '18 at 06:14
@AnaLizaPandac mark it as duplicate if you find a similar question on SO — quirimmo, Dec 25 '18 at 06:20

Praveen Rao Chavan.G · Answer 1 · 2018-12-25T06:54:21.493

1. Does the former implementation accept states? If so, how would one code the constructor and the state declaration?

ANSWER: No, former implementation will not accept state because it's a stateless component or ( functional component ), they don't hold state , we use such components when the component doesn't need to hold state.

2. Is it more efficient than the latter? It certainly looks more concise and straight to the point, but what are the pros and cons of this coding style?

ANSWER: It's always advised to use have lesser stateful components ( Components which manage your state ) when there is no necessity for your component to manage state or the component doesn't have a scenario in which it needs to hold state, I would advise you to use a functional component.

Why ? its because the more stateful components you create there are more components which hold your state and you need to make sure you manage these properly, when there are few container components which hold the state you have fewer places where you need to update the state.

If you want to use any lifecycle hooks, then you have to use Class based components.

3. What is it called? I'd love to read more about this.

ANSWER:

First approach is called : Stateless components OR ( Functional components )

const welcome = (props) = {
  //I am generally used where managing state is not required
  return <h1>Hello, {props.name}</h1>;
}
export default welcome;

Second approach is called : Statefull component OR ( Container components )

class Welcome extends React.Component {
  //I can hold state
  //I have lifecycle hooks
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
export default Welcome;

check this out Class based component VS Functional components

also Stateful vs. Stateless Functional Components in React

There are a lot of benefits if you decide to use stateless functional components , easy to write, understand, and test, and you can avoid this keyword.

as of React v16, there are no performance benefits from using stateless ( functional components ) over class components ( Stateful components ).

about performances, the bottle neck of performances for react components is definitely the rendering. So about performances, using stateful components or stateless components it doesn't change too much. `shouldComponentUpdate` or in general `PureComponents` are the ones increasing performances usually — quirimmo, Dec 25 '18 at 06:27
Hello praveen. Functional components can have state using hooks. Please look at links in my answer. — Ramesh, Dec 25 '18 at 06:29
@ramesh React Hooks have just come in v16.7, so yes but what about later versions? — Praveen Rao Chavan.G, Dec 25 '18 at 06:31
Later versions as in >16.7 will have them. Earlier versions i.e <16.7 will not. But as this answer will be there for many futures to come, it would be helpful to point out that functional components can have state. Thank you... — Ramesh, Dec 25 '18 at 06:33
@ramesh can you please give me a link where I could read a bit about the introduction of state in functional components? — quirimmo, Dec 25 '18 at 06:35
@quirimmo - Links in my answers point to them. Adding them here for reference https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-state.html — Ramesh, Dec 25 '18 at 06:37

Ramesh · Answer 2 · 2018-12-25T06:35:25.220

-1

First one is called functional components. Second one is called class components.

You can learn more about them @ official React Docs @ https://reactjs.org/docs/hooks-state.html

Now, to answer your questions

Yes. Functional components can have state using hooks. They are at the time of writing in alpha introduced in v16.7. Hooks not only brings support for states but also other component life cycle extensions
Initially functional components are used for creating stateless components. But now with hooks it can also be used for stateful components. functional components embraces functional programming. You can read how Classes confuse both people and machines section at https://reactjs.org/docs/hooks-intro.html
First one is called functional components and second one is class components.

edited Dec 25 '18 at 06:35

answered Dec 25 '18 at 06:20

Ramesh

13,043
3
52
88

what is this answer? he is asking 3 questions about it. You are just replying to the latter – quirimmo Dec 25 '18 at 06:21
@quirimmo - Yeah. I am not complete yet. Will make an attempt to answer all three.. Thanks... Merry Christman – Ramesh Dec 25 '18 at 06:23
Merry Christmas to you too :) – quirimmo Dec 25 '18 at 06:24
@quirimmo - Updated, trying to answer all the questions.. – Ramesh Dec 25 '18 at 06:30
I didn't downvote it, so I don't know who downvoted it – quirimmo Dec 25 '18 at 06:30

What's the difference between these two implementations of a React Component?

2 Answers2