React Components Arrow and Class options

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.

I have completed the challenge code for “Review Using Props with Stateless Functional Components” using a stateless component ( a class that extends React.Component) which passes all the tests.
I later checked the code answer under “get a hint” and see that it is coded as an arrow function. The arrow function is a stateless function rather than a stateless component ?
Both of these work OK and pass all tests. The arrow function does not specifically use “render()” in the code. Is render() therefore automatically implied ?

  **Your code so far**


class CampSite extends React.Component {
constructor(props) {
  super(props);
}
render() {
  return (
    <div>
      <Camper/>
    </div>
  );
}
};
// Change code below this line

class Camper extends React.Component {
constructor(props) {
  super(props);
}
render() {
  return <p>{this.props.name}</p>;
}
}

Camper.defaultProps = {
name: "CamperBot"
};

Camper.propTypes = {
name: PropTypes.string.isRequired
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.55

Challenge: Review Using Props with Stateless Functional Components

Link to the challenge:

2

Both are react components. In the old days you couldn’t maintain state in a functional component. So the only way to implement state was class components. But in 2018 or something react introduced hooks specifically useState hook which can be used to implement state in functional components. Since a functional components are easy to use and understand than class components most of the developers have switched to functional components.

In function components what the component returns is rendered on the screen while in a class components its return value of the render method

1 Like
3

Thank you for your response. I usually use VS Code to run challenges on before I enter my solution code on FCC. I see that when I run the react code using classes the Babel compiler usually gives a message of “useless constructor”. This up to now has been true as when I remove the constructor code everything still works OK. I s there some React components code where the compiler will not issue this message? This leads to a decision when to use or not use a class constructor in react.

4

I see that when I run the react code using classes the Babel compiler usually gives a message of “useless constructor”.

Yeah, a lot of people teach class components to always use a constructor. If you aren’t doing anything in there, you don’t need it - JS will just use the default constructor, which I assume is just calling super. And if you use arrow functions for your methods, there is no need to bind this so there usually isn’t a need to add one.

With regards to class/vs function, I would also say that functional components are preferred because they are supposed to be a little lighter and faster. In modern React developing, we rarely use class components. They’re still important to learn because you will probably have to maintain some class components and a lot of the concepts will transfer over anyway. If you understand state and lifecycle methods, it is a fairly easy switch to hooks.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.