-1

I am new to React and how programs created with it are designed. I know its a frontend framework for easy, responsive design. My question is, is it bad practice to use a standard class (example below) for handling some of the logic behind the app? And if so, what would be a better alternative?

I do understand that react is built to use components, but I can't make sense of (or am unsure of how to) use a component simply for a class that will help handle some data that I have and will be doing things with in the background.

App.js Example

import Queue from'./classes/Queue'

const App = () => {
    
    const x = new Queue([]);

    x.enqueue('foo')
    
    return (

        <div>
            // stuff
        </div>

    )

}

Class Example:

public Queue {

    let list = [];

    constructor(params) {

        this.list = list;

    }

    Queue.prototype.enqueue = function(bar) {
        // do stuff
    }

}

This is just a brief mockup I made to better illustrate my question.

derrickmfirefly
  • 33
  • 3
  • You will get a brand new instance of the `Queue` class every time `App` rerenders since it is declared in the function body. It is perfectly valid to store class instances in state (or preferably a `ref`) to preserve them between renders, but they will be isolated from the render cycle (i.e. updating them will have no effect on component itself). If the class has a direct link with updating the UI it might be a good idea to rewrite it as reusable React logic via a custom hook, or create a bridging component/hook which triggers state updates when class methods are called. – lawrence-witt May 25 '21 at 14:19

2 Answers2

0

Based on your example, there is a major difference.

For class component, I'm sure you are quite familiar with the usage, as long as you are aware of the react cycle method, ex. render etc.

However for functional component, you need to be careful of putting stuff inside this render function App. Because this function will be invoked during mounting, and every updating afterwards.

Just imagine, if the same App() is invoked second time, what it means for you :)

Then you might wonder what you should do, please look for a topic called React Hook for initializing and working with your custom state.

windmaomao
  • 7,120
  • 2
  • 32
  • 36
  • Well, the example could have probably been better. I would execute functions on the class instance only inside of either hooks or other functions. That way I don't have a million instances being created on accident. I'm assuming that is what you are talking about, if not, please elaborate. – derrickmfirefly May 25 '21 at 14:17
  • Yes, you are calling `new Queue()` every time you enter this function, and `x` is a LOCAL variable!! so how will that help you to have a local static variable which gets intialized everytime. To address that, you need to learn React Hooks. https://javascript.plainenglish.io/hooks-part-3-usestate-26a622bbe462 – windmaomao May 25 '21 at 14:19
  • Just want to add, your class understanding is pretty solid, but applying that to a functional component in React isn't as straight forward as it seems, because you only have one function instead of lots of function in class case :) Keep that in mind. That'll help. – windmaomao May 25 '21 at 14:21
  • Alright, I think I understand. I just need to make sure that initialization and execution of commands on the instance of Queue is only being done inside of hooks or other function calls to prevent repetition on every reload. – derrickmfirefly May 25 '21 at 14:21
  • You got it man. Pretty much you need to do everything as used to be, but in a different format so that that render function can be (re)used for all purposes, in your case, initialization, update, or even dismount. Since you might have some clean work to do. – windmaomao May 25 '21 at 14:31
0

I think you are asking what is the difference between functional components and class components and when to use them.

Simply answer your question. Function components:

  • "Stateless" components because they simply receive props and display React elements.
  • Use React hooks
  • no render() method
  • can use arrow function to define a function component, or use the regular function

Class component

  • "Stateful" components
  • use lifecycle methods
  • must have a render() method
  • must extend from React.Component or React.PureComponent

There are many discussions online. Those are some. When to use ES6 class based React components vs. functional ES6 React components?

https://flatlogic.com/blog/functional-components-vs-class-components-in-react-js/

Hope they help you.

kiki
  • 62
  • 5