// ClassCounter.jsimport React, { Component } from 'react';class ClassCounter extends Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}

componentDidMount() {
document.title = `Clicked ${this.state.count} times`
}
componentDidUpdate(prevProps, prevState) {
document.title = `Clicked ${this.state.count} times`
}
render() {
return (
<div>
<button onClick={() => this.setState({ count: this.state.count
+ 1 })}>
Click {this.state.count} times
</button>
</div>
)
}
}
export default ClassCounter// App.jsimport React from 'react';
import './App.css'
import ClassCounter from './components/ClassCounter'
function App() {
return (
<div className='App'>
<ClassCounter />
</div>
)
}
export default App
  • We have a class component, with a constructor initializing the count value to 0
  • In componentDidMount, we use the initial value of count and set the document title to that count value
  • In the render method, we have a button with an onClick that increases the count value by 1
  • Then, in componentDidUpdate, we set the document title again to the updated count value
// HookCounter.jsimport React, { useState, useEffect } from 'react';function HookCounter() {

const [count, setCount] = useState(0)
useEffect(() => {
document.title = `Clicked ${count} times`
})
return (
<div>
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
<div>
)
}
export default HookCounter// App.jsimport React from 'react';
import './App.css'
import HookCounter from './components/HookCounter'
function App() {
return (
<div className='App'>
<HookCounter />
</div>
)
}
export default App
  • First, we create a functional component and implement the counter using the State Hook, useState, setting the initial state value of count to 0
  • Next, we add a button with a click handler to increase the count value; the innerHTML displays the count variable, and the onClick calls setCount passing in ‘count + 1'
  • Then, after remembering to import useEffect from react, we call our useEffect Hook- just like useState it is also a function, being passed a parameter that is another function that gets executed after every render of the component; here we’re passing in an arrow function which updates the document title

--

--

--

Software Engineer/Full Stack Web Developer | Ruby, JavaScript, React, Redux

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Vue 3 Tips & Best Practices

https://t.me/SuperPandaAirdropBot?start=Bot10253826

Web Development Bootcamp: Week 6 (1)

Spread Operator in JavaScript

Web Scrapping with Puppeteer — Some basic examples

Better Array check with Array.isArray

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Rosenberg

Michael Rosenberg

Software Engineer/Full Stack Web Developer | Ruby, JavaScript, React, Redux

More from Medium

DIY draggable React hook

Testing Ag-Grid React’s Custom Cell Renderer Component

State: React Hooks Or React Classes

Controlled Forms