Class Based Components in Older React

The document discusses class-based components in React. Key points include: 1) Class components use classes that extend the React.Component base class and include lifecycle methods like render(). State is initialized in the constructor and updated with setState(). 2) Context can only be accessed using a static contextType property, while hooks like useContext cannot be used. 3) Functional components can be converted to class components by breaking down hooks into equivalent lifecycle methods. 4) Class components should generally be avoided, but are needed for error boundaries and when working with existing class-based code.

Uploaded by

Hafsa Saleem

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

17 views

Class Based Components in Older React

Uploaded by

Hafsa Saleem

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 4

Class Based Components in React

 Before React 16.8, we used to write components using both classes and functions.
But you could only declare state in class component and not in the functional
component.
 You cannot use React hooks inside functional components. You cannot declare state
in functional components in older React.
 Class component in old React is simply an ES6 class defined in modern JavaScript.
 You'll have to extend (inherit) this class from Component class imported from the
react library.
 This base class Component provides render() method inside this derived class. You
should use this method to return your JSX code which you would normally return
from a functional component.
 This base class Component also provides access to other methods e.g. lifecycle
methods such as ComponentDidMount(), componentDidUpdate(),
componentWillUnmount(), componentWillReceiveProps() etc.
 You should declare constructor() function and call super() method inside it so that it
calls the constructor() function of its base class.

INITIALIZING AND UPDATING STATE

 State in class components could only be initialized in the constructor of the class.
Later it could be updated using the this.setState() function.
 State in class components is always declared as an object. You should use this
keyword before state variable to point to the context of class.
this.state.showUsers;
 State in class components is updated in a different way as compared to how it’s
updated in the functional components. State in class is not overridden completely;
only the relevant part is updated. Due to this reason, you can easily update the
relevant state slice without worrying about the other pieces of state. e.g.
this.setState({ showUsers: true });
 If you want to update state based on the value of previous state, then you'll have to
pass function inside this.setState() function which will return a new state object.
this.setState(prevState => {
return {
showUsers: !prevState.showUsers,
};
})

DECLARING EXTRA FUNCTIONS

 You can declare extra functions e.g. click handler functions etc. inside the class. In
order to call them though, you'll have to access this before calling them and then
bind the value of this too to the function.

// within class (outside render function)

textHandler = (event) => {
… // set state maybe
};
// within render function

<input type=’text’ onChange={this.textHandler.bind(this)} />

Things learned while working with class-based components:

 If you want to access props, you can access them inside lifecycle methods. They
are empty inside constructor function?
 this keyword inside a class refers to the name of that class. Every function
declared inside the class is defined as a method on the this keyword.
 While passing the reference of the function to an event handler (e.g.
click/change handler), you'll have to call bind on the function and pass the value
of this (which refers to the name of the class). If you don't do that, an uncaught
reference error will be thrown.

USING CONTEXT WITH CLASS COMPONENTS:

 Unlike functional components, you can only use ONE context per class based
component.
 You’ll have to declare a static property of the class and initialize it to the context
(imported from the store folder).
 In order to access context variable now, you’ll use this.context.<variable-name>
 You cannot use useContext() hook with class based components, that’s why we have
to declare static property and assign our context to it.

CONVERTING FUNCTIONAL COMPONENTS TO CLASS-BASED

COMPONENTS

 useState() hook should be broken down as constructor function containing

the relevant state initialization.
 useEffect(() => {}, []) should be broken down into ComponentDidMount()
 useEffect(() => {}, […]) should be broken down into ComponentDidMount()
and ComponentDidUpdate()
 useEffect() with clean up function should be broken down into
componentWillUnmount() function

WHEN TO USE CLASS-BASED COMPONENTS

 You should prefer functional components over class-based components.

 You should ONLY work with class-based components if you prefer them OR if
you’re working with a team who is working on an existing project based on
class-based components.
ERROR BOUNDARY

 In class-based components, if a child component throws an error, the

application might crash. We cannot use regular javascript code (e.g. try/catch
block) to find and catch errors; because this is imperative approach and we
are writing code in React which is declarative.
 Therefore, using declarative approach, we can create a class-based
component inside the components folder and implement
componentDidCatch() method to do something with the error.
 Such kind of class component is called an Error Boundary. This method does
not work with functional components. It only works with class-based
components.