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)
- 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>
)