React - Incorrect use of hooks and class components

Question

React - Incorrect use of hooks and class components

Understanding hooks as the opposite of a class component can be confusing. A simple line of code can trigger an error when trying to adapt it for use in a class component. Take, for example, this situation: .jsx files and functional components work seamlessly with a given piece of code.

Explore Codesandbox example one

This particular piece of code showcases a straightforward method of sharing state between components. The concept is demonstrated through two key files: extendDiv, responsible for managing the state and its modification, and a separate file called global, designed to propagate that state across all components - specifically, a "son" (filho) and "father" (pai).

Although everything works smoothly in the Codesandbox example one, attempting to replicate the same functionality with a class component in the App.jsx along with some TypeScript files leads to an error message:

global.isDivExtended = extendDiv();
//Invalid hook call. Hooks can only be called inside of the body of a function component.

To delve deeper into this issue, feel free to explore the complete code and experiment further using Codesandbox example two. If you're seeking solutions on how to make this setup function within a class component context, attempts to bind global or leverage this have been made without success. Any insights provided would be greatly appreciated. Thank you.

reactjs typescript class react-hooks state

Answer 1

Answer №1

Avoid calling React hooks from within class components.

To resolve this issue, you have two options: either convert your class component to a function component and utilize hooks for managing state, or stick with the class component and manage state using class-component methods. The preferred approach is to convert to a function component.

Although I cannot confirm due to missing files in the sandbox, it is likely that the following code snippet could work:

import * as React from "react";
import "./styles.css";
import Father from "../src/components/father";
import global from "./global";
import extendDiv from "./extendDiv";

function App(props) {
  let [dateVar, setDateVar] = React.useState({ date: new Date() })
  global.isDivExtended = extendDiv();

  return (
      <>
        <Father></Father>
      </>
  )
}

export default App;

Alternatively, consider creating a higher-order component wrapper for your hook logic. This way, you can pass the hook's functionality as a prop to your class component. More information on this approach can be found here. However, it is advised to avoid this method if possible as it can lead to confusion and make testing more difficult. Function components are considered the future of React and provide a more enjoyable coding experience.

Answer 2

Avoid calling React hooks from within class components.

To resolve this issue, you have two options: either convert your class component to a function component and utilize hooks for managing state, or stick with the class component and manage state using class-component methods. The preferred approach is to convert to a function component.

Although I cannot confirm due to missing files in the sandbox, it is likely that the following code snippet could work:

import * as React from "react";
import "./styles.css";
import Father from "../src/components/father";
import global from "./global";
import extendDiv from "./extendDiv";

function App(props) {
  let [dateVar, setDateVar] = React.useState({ date: new Date() })
  global.isDivExtended = extendDiv();

  return (
      <>
        <Father></Father>
      </>
  )
}

export default App;

Alternatively, consider creating a higher-order component wrapper for your hook logic. This way, you can pass the hook's functionality as a prop to your class component. More information on this approach can be found here. However, it is advised to avoid this method if possible as it can lead to confusion and make testing more difficult. Function components are considered the future of React and provide a more enjoyable coding experience.

React - Incorrect use of hooks and class components

Answer №1

Similar questions

What is the significance of utilizing generic types as values within a generic class?

The error I encountered with the Typescript React <Select> onChange handler type was quite

Transitioning from CRA to Gatsby caused issues with JSS plugins

What changes can I make to my React components to prevent them from constantly re-rendering?

I seem to be missing something, as the client_id is required for Next Auth. What could it

Module 'csstype' not found

Using Typescript to import an npm package that lacks a definition file

What causes Next.js code lifecycle to run multiple times?

The conflict between Material UI's CSSBaseline and react-mentions is causing issues

Add a custom design to the Material UI menu feature

Effective strategies for extracting value from asynchronous Angular events that return Promises

What sets apart TypeScript's indexed types from function signatures?

In React, is it typical to maintain identical values in both state and ref?

Creating Beautiful Tabs with React Material-UI's Styling Features

What is the best way to logout and remove cookies once the jsonwebtoken has expired?

`Is There a Solution When Compilation Fails?`

Creating TypeScript domain objects from JSON data received from a server within an Angular app

Preact: occasional occurrence of a blank page after refreshing

Link the chosen selection from a dropdown menu to a TypeScript object in Angular 2

Steps for generating a unit test for code that invokes scrollIntoView on an HTML element