Common Bugs when Learning React

common-react-bugs.md

Common Bugs when Learning React

The following list tries to summarize some of the things that a developer may encounter while learning React. The list focuses on scenarios that result in actual bugs (things that don't work) or things that cause warnings in the console.

• using class prop instead of className (for/htmlFor, etc...)
• trying to set the style prop with a string
• not having a parent element or fragment
• not binding (at all or incorrectly)
• using the wrong lifecycle hook
• misspelling componentWillReceiveProps
• trying to use value from setState immediately after setting
• not using keys on items
• using keys, but using the index
• using a lowercase component name
• Not wrapping objects with parentheses
• using props directly in initial state (not defaultValue)
• accidentally overriding props when spreading in JSX
• injecting HTML (not using dangerous)
• tryng to use an event object that isnt' persisted
• using pure component without immutable data
• passing the wrong type to a prop (e.g. component expects number, but pass string)

Submissions from Twitter or Comments

• Eric Adams - Honestly just forgetting to wrap spread props in braces, e.g. <MyComponent should="work" but="I'm" gonna="whoops" ...props />
• James Nolan - Calling setState on an unmounted component (typically when forgetting to abort an ajax request on componentWillUnmount)
• Cory House - Unknowingly mutating state (misunderstanding copy by Val vs ref), binding (this confusion), improper casing (propTypes/Component), Redux all the things, lack of ES6+ knowledge is most common gap so I start there.
• Benjamin Lannon - One I got caught up on was executing a function within an onClick property (Click Me!) when you should write (Click Me!)
• Nick Kircos - Accidentally trying to access a prop from this.state and vice versa
• Jeff Pierson - Attempting to set a variable to JSX expression and then attempting to use that variable name as a component element name. This only works for function names, not variables.
• summasmiff - I definitely tried to mutate objects in state and had some hard times because of it
• Nick Kircos - Not React specific. But forgetting to export your component
• Toby Leftly - Maximum call stack exceeded when using setState in componentDidUpdate() maybe?
• Jeff Pierson - Attempting to set own props in response to an event instead of setting and using component state. Of course when not using Redux.
• Nick Kircos - Calling setState in render
• Maggie Hedrick - one I've seen is actually understanding what the curly braces are for - when I first started I just thought it was single some places and double others until it clicked and I felt like the worlds biggest idiot

One I got caught up on was executing a function within an onClick property (<button onClick={this.doStuff()}>Click Me!</button>) when you should write (<button onClick={this.doStuff}>Click Me!</button>)

Deja vu

Ohh thanks Benjamin and Mike, good to know that is a common thing to look out for!

Mixing native and virtual events leads to unexpected results, since the virtual events all happen after the native events are all done bubbling.

Some mistake I made when building my first react app.

1. Immutable approach for manipulate states
2. Radio buttons, checkbox sometime hard to manage
3. Execution of child component life cycle difficult to predict
4. Passing data from grandchild to parent is sometime hard

Making array, object mutations when using Array.map, Array.reduce or similar, that affects the component state without running lifecycle methods.

another is componentdidMount() { ... } mistakenly using small "d" will not shout for any error

mapStateToProps() in Connect(AdhocQuery) must return a plain object. Instead received undefined.

I'm in the middle of trying to figure out what this means. 😝