Class Component vs Functional Component with hooks in React-Native
Class Component
Before React Hooks, when we want to create a dynamic component, we have to create a class component and use lifecycle methods to change states to make it reusable and encapsulate.
The class needs to extend React.Component
with a render
method in it, which will return the JSX markups. Also, we need to assign the initial state in the constructor with this.state
. As an example, here we create a simple clock component with class. To make the clock working, Lifecycle Methods have to be added in the class. In React, mounting a component will invoke the following four build-in methods:
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()
In this example, the initial state of the constructor has been set and componentDidMount()
is defined to set the time every second. So the clock will update the state every second with the current time.
class Clock extends React.Component {
constructor(props) {
super(props)
this.state = { date: new Date() }
} componentDidMount() {
this.time = setInterval(() => {
this.changeTime()
}, 1000)
} componentWillUnmount() {
clearInterval(this.time)
} changeTime() {
this.setState({ date: new Date() })
} render() {
return (
<div className="clock">
<h1>Hello! This is a class component clock.</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
)
}
}
For a class-based component, several steps are needed to make it work with state-changing:
- Create a class with
constructor(props)
andrender()
methods. - Set initial state with
this.state
statement in the constructor. - Use
this.setState()
to update states. - Use lifecycle methods like
componentDidMount()
,componentWillUnmount()
, to change states
Function Component with hooks
The most useful feature of Hooks is that it allows using state without using class.
There are two most commonly used hooks: the state hook — useState
and the effect hook -- useEffect
.
State hook allows you to add states in the function component. Instead of setting an initial state with this.state
statement in the constructor, we can import { useState }
from react, which will allow you to set the initial state as an argument. State hook will return a pair of values: the current state and a function that updates it. Usually, we will use useState
like this:
const [time, setTime] = useState(new Date())
Effect hook will get invoked with the first DOM updating. A function can be passed in useEffect
, and every time the DOM gets updated, the function in useEffect
will get invoked too. Also, the effect hook allows to pass in an array as the second argument, which contains all the dependencies that will trigger the effect hook. If any of the dependencies changed, the effect hook will run again. Instead of making the request every time with DOM updates, you can pass in dependencies that only make the request while these values change.
useEffect
can be used like:
useEffect(() => {
setInterval(() => {
changeTime()
}, 1000)
})
So, re-writing the clock with hooks looks like:
const ClockUsingHooks = props => {
const [time, setTime] = useState(new Date()) const changeTime = () => {
setTime(new Date())
} useEffect(() => {
const tick = setInterval(() => {
changeTime()
}, 1000)
return () => clearInterval(tick)
})
return (
<div className="clock">
<h1>Hello! This is a function component clock.</h1>
<h2>It is {time.toLocaleTimeString()}.</h2>
</div>
)
}