React Class's method instead of React stateless functional component

Question

I read a lot about the differences between React component, stateless functional component, pure Component etc ...

I m curious about the use of method instead of stateless functional component, because i didnt found any information about it.

Here is my code, i m making a simple login class

// --------------------------- //
// -- LOGIN REACT COMPONENT -- //
// --------------------------- //

export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.dataLoaded = false;
        this.state = {
            login  : 'pending', // 3 values : success, fail, pending => 3 differents render
            verify : false // could trigger visual cue on loading page when switched to 'true'
        };
        // Verify User if provided
        this.verifyUserToken(userData.userId, userData.token);
    }

    //////////////////
    // -- RENDER -- //
    //////////////////
    render() {
        if (this.state.login === 'pending') return this.pendingPage();
        if (this.state.login === 'success') return <App login={true} />; // ./App.js
        if (this.state.login === 'fail') return this.loginForm();
        return <div> This page should never load </div>;
    }

    // -- PENDING PAGE -- //
    pendingPage() {
        let loader = icons[10];
        return (
            <div id="login">
                <img src={loader} alt="" className="loader" />
            </div>
        );
    }

    // -- LOGIN FORM-- //
    loginForm() {
        return (
            <div id="login">
                <form>
                    <div id="errorLogin" className="hidden">
                        {stringsLocalized.login.errorLogin}
                    </div>
                    <input type="text" id="pseudo" placeholder={stringsLocalized.login.pseudo} />
                    <input type="password" id="password" placeholder={stringsLocalized.login.password} />
                    <button type="submit" onClick={this.handleClickLogin}>
                        {stringsLocalized.login.button}
                    </button>
                </form>
            </div>
        );
    }

    ////////////////////
    // -- HANDLERS -- //
    ////////////////////

    handleClickLogin = e => {
        e.preventDefault();
        let pseudo = document.querySelector('#pseudo').value;
        let password = document.querySelector('#password').value;
        this.verifyUserPassword(pseudo, password);
    };

If i follow react logic i should create stateless functional component for pendingPage & loginForm instead of method inside Login class.

Should I ? I couldn't find any information if this was a OK practice or not.

Any benefit of using stateless functional component in this case ?

stateless functional component is not a recommended term. 1. function components are not stateless any more starting v16.8.0. 2ndly, functional components doesn't refer to function component as functional refers to Functional Programming. So just use the term function component 🙂 — dance2die
– dance2die, Commented Feb 13, 2019 at 16:37
Thanks for the info, i didnt know theses component wont be stateless anymore. — Niko
– Niko, Commented Feb 13, 2019 at 17:22

prabin badyakar · Accepted Answer · 2019-02-13 15:45:55Z

1

Stateless component refers to component with no state. So where can we use them? Answer is simple, if there is any UI component which needs no state. For instance, you need to show list of image. In this component you don't have to use stateful component. You can simply make a stateless component something like this

const ImageItem = () => {
   return (
      <img src='hi.png' width={100} height={100}/>
   )
}

Now lets jump it to your case. Currently there is not state needed in pending page. But in case of login form you might need to make a stateful component. State might be needed for validation and other purposes.

In case of stateless pending page, you can do create a new component and import in your current file.

    import React from 'react';

    const PendingPage = () => {
        const loader = icons[10];
        return (
            <div id="login">
                <img src={loader} alt="" className="loader" />
            </div>
        );
    }

    export default PendingPage;

answered Feb 13, 2019 at 15:45

prabin badyakar

1,7463 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niko Over a year ago

Thank you for your answer, so if i understand it is mainly usefull to split my code into files ? And later on easier to update or change a stateless component into a class ? What about polymorphism and function component name ?

prabin badyakar Over a year ago

Yes. Splitting the components helps to render smallest component which only needs to re render. I hope suggest you to take some crash course for better understanding of other stuff. :)

Collectives™ on Stack Overflow

React Class's method instead of React stateless functional component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related