Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics Thinking in Components Components as Arrow Functions

Components as Classes vs Function or arrow functions.

in this course Guil Hernandez teach us how to create basic components using functions, but I've been wondering why not as a JS class from the beginning, using JS Classes save us a lot writing / time and the code it's much cleaner.

import React, { Component } from 'react';

class Header extends Component {
  render() {
    return (
      <header>
          <h1>Scoreboard</h1>
          <span>Players:1</span>
      </header>
    );
  }
}

export default Header;

Also thanks a lot for this awesome course, I really like every course you give Guil Hernandez, awesome work, keep it that way :).

4 Answers

Cooper Runstein
Cooper Runstein
11,836 Points

There is a big difference between function based components and class based components. Mainly class based components can have their own state -- this is not something you'll always want. You'll want only a few container components to have their own state, creating functional components makes sure you don't give state to components that shouldn't be managing state. Functional components can make things a lot easier to manage, you'll never be able to mutate state in a functional component, you can only interact with props. There are times where I only have a single class based component in my entire application with 20+ functional components.

hum... I have to keep experimenting, I'm new in react, I've been working for a while with angularjs and angular 2, where I work we use AngularJS and we do angular components using ES6 JS Classes, I know it's a different story but I thought that there was not a significant difference between function and es6 clases besides the way we write them, like I explained above I like to uses classes makes the code cleaner and easier to read.

import React, { Component } from 'react';
// Easily import components bits.
import Header from './header/header';
import Player from './player/player';

/*
 * No need of function declaration just class name and make sure it extends from component
 */
class Scoreboard extends Component {
  render() {
    /*
     * If I wanted to use props I don't need to function Scoreboard(props)
     * just {props.prop}
     */
    return (
      <div className="scoreboard">
        <Header title="Scoreboard" totalPlayers={1}></Header>
        <Player></Player>
      </div>
    );
  }
}

export default Scoreboard;
Cooper Runstein
Cooper Runstein
11,836 Points

I would disagree, classes and functions are equally easier to read, but remember that 'classes' in JavaScript are more special syntax than anything else. In React all data flows top down, functional components essentially force you to follow that model. You can use classes for all components, but that gives every component the ability to run lifecycle methods and hold state. This is normally not a good thing, only top level components should be doing that sort of thing.

Cooper Runstein
Cooper Runstein
11,836 Points

I think a lot of it is personal preference, I know a lot of guys a lot better at React than I am have advised me to use functional components where I can, so that's what I do. I like the fact that you don't ever need to worry about this/binding issues, they're often easier to test, and they're always dumb components no matter what. If you work in a team, functional components are also a really obvious sign to others that might add to your code that the component is not meant to directly touch state or do much other than present itself.

Cooper Runstein you may be right, I'll try to read some more around the Internet, according to Guil Hernandez there isn't anything wrong with just declaring your components using classes from the beginning.

Again there are standards set by the community that are good to follow, I'll check the Airbnb react style guide.

https://github.com/airbnb/javascript/blob/master/react/README.md

Hi guys

Interesting discussion you are having and I learned a lot from what I read. I am a newbie with React and wondered why Guil chose to remain with the curly braces and parentheses. Isn't it also cleaner to remove them?

Thanks

p.s. Treehouse is absolutely brilliant and thank you for all of your great tutorials.

Aurelius

Blake Morrison
Blake Morrison
9,665 Points

I'm guessing Guil did that to explicitly show what is being returned from the component

The Airbnb React/JSX Style Guide has a paragraph on this subject that makes sense: If you don’t have state or refs, prefer normal functions (not arrow functions) over classes.

They also advise to steer away from arrow functions: If you don’t have state or refs, prefer normal functions (not arrow functions) over classes. What is your opinion in this?