React Common Mistakes

 

1. Missing Export Statement

Mistake:

File: src/App.js

1

2

3

4

5

6

7

import Counter from './components/Counter'

const App = () => {

return <Counter />

}

export default App

JSX

File: src/components/Counter/index.js

1

2

3

4

5

6

7

8

9

10

11

import { Component } from 'react'

import './index.css'

class Counter extends Component {

render() {

return (

<p className="counter">Counter</p>

)

}

}

JSX

Collapse

2. Missing Import Statement

Mistake:

File: src/App.js

1

2

3

4

5

const App = () => {

return <Counter />

}

export default App

JSX

File: src/components/Counter/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

import { Component } from 'react'

import './index.css'

class Counter extends Component {

render() {

return (

<p className="counter">Counter</p>

)

}

}

export default Counter

JSX

Collapse

3. Missing Extending the React Component Class

Mistake:

File: src/App.js

1

2

3

4

5

6

7

import Counter from './components/Counter'

const App = () => {

return <Counter />

}

export default App

JSX

File: src/components/Counter/index.js

1

2

3

4

5

6

7

8

9

10

11

import './index.css'

class Counter {

render() {

return (

<p className="counter">Counter</p>

)

}

}

export default Counter

JSX

Collapse

4. class vs className

Mistake:

File: src/components/Counter/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

import { Component } from 'react'

import './index.css'

class Counter extends Component {

render() {

return (

<p class="counter">Counter</p>

)

}

}

export default Counter

JSX

Collapse

5. onclick vs onClick

Mistake:

File: src/components/Counter/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import { Component } from 'react'

import './index.css'

class Counter extends Component {

onIncrement = () => {

console.log("on increment called")

}

render() {

return (

<p className="counter">Counter</p>

<button onclick={this.onIncrement}>Increase</button>

)

}

}

export default Counter

JSX

Collapse

6. Event Listeners inside Class Component

Mistake:

File: src/components/Counter/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

import { Component } from 'react'

import './index.css'

class Counter extends Component {

state = { count: 0 }

onIncrement() {

const {count} = this.state

console.log(count)

}

render() {

return (

<p className="counter">Counter</p>

<button onClick={this.onIncrement}>Increase</button>

)

}

}

export default Counter

JSX

Collapse

Solution:

1

2

3

4

onIncrement = () => {

const {count} = this.state;

console.log(count);

};

JAVASCRIPT

In Arrow functions,

this

refers to the context in which the code is defined.

7. Passing Event Handler

Mistake:

File: src/components/Counter/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import { Component } from 'react'

import './index.css'

class Counter extends Component {

state = {count: 0}

onIncrement = () => {

this.setState(prevState => ({

count: prevState.count + 1

}))

}

render() {

return <button onClick={onIncrement}>Increase</button>

}

}

export default Counter

JSX

Collapse

Solution:

1

<button onClick={this.onIncrement}>Increase</button>

JSX

8. Modifying the State Directly

Modifying the state directly won't trigger the

render()

method.

Mistake:

1

2

3

onIncrement = () => {

this.state.count = this.state.count + 1;

};

JAVASCRIPT

Solution:

1

2

3

4

5

onIncrement = () => {

this.setState(prevState => ({

count: prevState.count + 1

}));

};

JAVASCRIPT

Updating Object

Mistake:

1

2

3

4

5

6

7

8

state = {

person: {name: "Rahul", age: 30}

}

onUpdateAge = () => {

const {person} = this.state

person.age = 29

}

JSX

Solution:

1

2

3

4

5

6

7

8

9

state = {

person: {name: "Rahul", age: 30}

}

onUpdateAge = () => {

const {person} = this.state

const newPerson = {...person, age: 29}

this.setState({person: newPerson})

}

JSX

Updating List

Mistake:

1

2

3

4

5

6

state = { numbers: [1, 2, 3] }

onUpdateNumbers = () => {

const {numbers} = this.state

numbers.push(4)

}

JSX

Solution:

1

2

3

4

5

6

7

state = {numbers: [1, 2, 3]}

onUpdateNumbers = () => {

const {numbers} = this.state

const updatedNumbers = [...numbers, 4]

this.setState({numbers: updatedNumbers})

}

JSX

9. Calling 

setState()

 from 

render()

Mistake:

1

2

3

4

render() {

this.setState({ count: 0 })

return ({...})

}

JSX

Specifying a new state with

setState()

function causes a new render. If we call setState from the

render()

function, this will cause an infinite loop.

When we call setState from the

render()

function, it will cause an infinite loop.

10. Invoking Event Handler

Mistake:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

import { Component } from 'react'

import './index.css'

class Counter extends Component {

state = {count: 0}

onIncrement = () => {

this.setState(prevState => ({

count: prevState.count + 1

}))

}

render() {

return (

<p className="counter">Counter</p>

<button onClick={this.onIncrement()}>Increase</button>

)

}

}

export default Counter

JSX

Collapse

Soution:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

import { Component } from 'react'

import './index.css'

class Counter extends Component {

state = {count: 0}

onIncrement = () => {

this.setState(prevState => ({

count: prevState.count + 1

}))

}

render() {

return (

<p className="counter">Counter</p>

<button onClick={this.onIncrement}>Increase</button>

)

}

}

export default Counter

JSX

Collapse

11. 

setState()

 is Asynchronous

setState()

does not update state immediately.

Mistake:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

import { Component } from 'react'

import './index.css'

class Counter extends Component {

state = {count: 0}

onIncrement = () => {

const {count} = this.state;

this.setState(prevState => ({

count: prevState.count + 1

}))

console.log(count)

}

render() {

return (

<p className="counter">Counter</p>

<button onClick={this.onIncrement}>Increase</button>

)

}

}

export default Counter

JSX

Collapse

12. React Component should return a single JSX element

Mistake:

1

2

3

4

5

6

const Welcome = () => (

<h1>Hello, User</h1>

<p>You are learning React</p>

)

export default Welcome

JSX

1

2

3

import Welcome from'./components/Welcome'

const App = () => <Welcome />

export default App

JSX

12.1 Fragments

The fragment is an alternate way to return a single JSX element. It groups a list of children without adding extra nodes to the DOM.

1

2

3

4

5

6

7

8

9

10

import {Fragment} from 'react'

const Welcome = () => (

<Fragment>

<h1>Hello, User</h1>

<p>You are learning React</p>

</Fragment>

)

export default Welcome

JSX

Short Syntax:

1

2

3

4

5

6

7

8

const Welcome = () => (

<>

<h1>Hello, User</h1>

<p>You are learning React</p>

</>

)

export default Welcome

JSX

13. Props are Read-only

Mistake:

File: src/App.js

1

2

3

import Welcome from './components/Welcome'

const App = () => <Welcome name="Rahul" />

export default App

JSX

File: src/components/Welcome/index.js

1

2

3

4

5

6

7

8

9

10

11

12

const Welcome = props => {

props.name = 'Ramu'

const {name} = props

return (

<>

<h1>Hello, {name}</h1>

<p>You are learning React</p>

</>

)

}

export default Welcome

JSX

Collapse