How can I initialize a class instance in a stateless function component in React?

react hooks
useeffect
react, ( usestate)
react functional component
useref
react function component typescript
stateless component react native
react native constructor

Using a stateful pattern, I usually initialize a kind of helper class in my constructor and consume its methods in some component lifecycle methods like below:

class StatefulComponent extends Component {
  constructor(props) {
    super(props);
    this.helper = new HelperClass();
  }

  componentDidMount() {
    this.helper.doSomething();
  }

}

Now, I wanted to convert the same logic into a stateless function component like this:

const StatelessFunction = (props) => {
   this.helper = new HelperClass();

   useEffect(() => {
     this.helper.doSomething();
   }, []);

}

But I worried when I saw that this component is being called every prop change from the beginning. And this made me think that my class instance is being created over and over. Am I wrong? Is there anything I can do for preventing re-creation of my class and use a ref instead?

I came across useRef but not sure if it fits my case.


You can use useMemo to create an instance of HelperClass and useEffect to call it. Giving them both empty array of dependencies means they will only be called "on mount". I put on mount in quotes because memo will be called only on first render and effect will be called after first render cycle is finished.

const StatelessFunction = props => {
  const helper = useMemo(() => new HelperClass(), []);
  useEffect(() => {
    helper.doSomething();
  }, [helper]);
  return (<JSX />);
};

If the only thing you'll ever do is just call doSomething and never use the helper instance again you can just do it with useEffect:

useEffect(() => {
  new HelperClass().doSomething();
}, []);

If you do plan to use the helper instance at some later time then you could use the previous example with useMemo or useRef:

const helper = useRef();
useEffect(() => {
  helper.current = new HelperClass();
  //only called once after first render
  helper.current.doSomething();
}, []);
//you still have the helper instance as helper.current

React: Class Component vs Functional Component, When would you use a class component over a function component? If you are unable to use the JSX syntax for writing React components, you will need to declare state using the getInitialState property with React.createClass; The correct way to use state. State is important but it's also easy to misuse. When building React applications, it's best to separate the business logic from the UI.


I'd go for useMemo solution, but here's how you can do it with useRef + useEffect to clear up some confusion:

const StatelessFunction = (props) => {
   const helper = useRef(); // ref is equivalent of instance prop

   useEffect(() => {
     helper.current = new HelperClass();
     helper.current.doSomething();
   }, []); // this is equivalent of componentDidMount
}

Class Component Overview in React ← Alligator.io, are easier to read, debug, and test. They offer performance benefits, decreased coupling, and greater reusability. We can define the class component that is stateless as follows: we have a React function component. The first parameter has our props. For instance, we can write the following code to do that:


You are correct, useRef allow you to have the same instance of HelperClass persisted across re-renders

const StatelessFunction = (props) => {
   const helper = useRef(new HelperClass())

   useEffect(() => {
     helper.current.doSomething();
   }, []);
}

Functional vs Class-Components in React - David Jöch, A functional(a.k.a. stateless) component is just a plain javascript function hooks and it is a javascript class which means that React creates instances of it. React should initialise the component class in order to call lifecycle  Stateful and Stateless Components in React Stateful and Stateless Components. Today, we’re going to review what stateful and stateless components are in React, how you can tell the difference, and the complex process of deciding whether to make components stateful or not. State Review. First, let’s review what state is.


React Functional or Class Components: Everything you need to know, Function and Class components both have some additional features that we will discuss in it passes JSX attributes and children to this component as a single object. Whether you declare a component as a function or a class, it must never All React components must act like pure functions with respect to their props. Items can be added, removed and marked as done — all this is achieved by means of updating the component state. Rewriting the to do list as a Function Component. Let’s now try to use React Hooks to implement the exact same behaviour in a function component. Imports and component definition


Components and Props – React, Since React 16.8.0 it has been possible to create stateful functional In the case of the class component, React creates an instance of the class using the Component { constructor(props) { super(props); this.state = { count: 0 }  Component class is a bit more complicated. It has a state, lifecycle hooks and it is a javascript class which means that React creates instances of it. React should initialise the component class in order to call lifecycle hooks, call a constructor, initialise state and more. class MyComponentClass extends React.Component {


How to write a React component without using classes or hooks, React has 2 types of components: Functional (Stateless) and Class (Stateful). for properties) object argument with data and returns a React element. it '​extends' React component. can accept props (in the constructor) if  A React component can be of two types: either a class component or a functional component. The difference between the two is evident from their names. Functional Components. Functional components are just JavaScript functions. They take in an optional input which, as I've mentioned earlier, is what we call props.