Anti-patterns are certain patterns in software development that are considered bad programming practices.
The same pattern may have been considered correct at one point in the past, but now developers have realized that they cause more pain and hard-to-track bugs in the long term.
Text
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
list: [
{ id: "1", name: "Suraj K.C." },
{ id: "2", name: "Ajay Shrestha" },
{ id: "3", name: "Sujan Shrestha" },
{ id: "4", name: "Arjun Yonjan" },
{ id: "5", name: "Saraswati Shrestha" },
{ id: "6", name: "Rosy Shrestha" },
{ id: "7", name: "Aishwarya Shrestha" }
]
};
}
update = () => {
const list = [...this.state.list];
list.splice(1,1);
this.setState({
list
})
}
render() {
return (
<div>
<NameList nameList = {this.state.list} />
<button onClick={this.update}>click me</button>
</div>
);
}
}
class NameList extends React.Component {
render () {
return this.props.nameList.map((name, index) => {
return <Name key={index} {...name} />
});
}
}
class Name extends React.Component {
componentWillUpdate(nextProps) {
console.log(this.props.name, nextProps.name);
}
render () {
return (
<div>Name: {this.props.name}</div>
)
}
}
render(<App />, document.getElementById('root'));
React use key to match children in the original tree. The keys are used for identification
key should be unique, stable, Predictable
Like index, random numbers or timestamps should not be used as keys
class EmailInput extends Component {
state = { email: this.props.email };
render() {
return <input onChange={this.handleChange} value={this.state.email} />;
}
handleChange = event => {
this.setState({ email: event.target.value });
};
componentWillReceiveProps(nextProps) {
// This will erase any local state updates!
// Do not do this.
this.setState({ email: nextProps.email });
}
}
class EmailInput extends Component {
state = {
email: this.props.email
};
componentWillReceiveProps(nextProps) {
// Any time props.email changes, update state.
if (nextProps.email !== this.props.email) {
this.setState({
email: nextProps.email
});
}
}
// ...
}
class EmailInput extends Component {
render () {
return <input value={this.props.email} onChange={this.props.onChange} />
}
}
class Form extends Component {
state = {
email:""
}
onChange = (event) => {
this.setState({
email: event.target.value
})
}
render() {
return (
<EmailInput email={this.state.email} onChange={this.onChange} />
)
}
}
loadSomething().then(function(something) {
loadAnotherthing().then(function(another) {
DoSomethingOnThem(something, another);
});
});
promise.all([loadSomething(), loadAnotherThing()])
.spread(function(something, another) {
DoSomethingOnThem(something, another);
});
<input onChange={this.updateValue.bind(this)} value={this.state.name} />
<input
onChange={ (evt) => this.setState({ name: evt.target.value }) }
value={this.state.name}
/>
class EmailInput extends React.Component {
constructor(props) {
this.state = {
value: ""
}
this.onChange = this.onChange.bind(this); // creates new instance of function
}
function onChange(event) {
this.setState({value: event.target.value})
}
render() {
<input value={this.state.value} onChange={this.onChange} />
}
}
class EmailInput extends React.Component {
constructor(props) {
this.state = {
value: ""
}
}
onChange = (event) => {
this.setState({value: event.target.value})
}
render() {
<input value={this.state.value} onChange={this.onChange} />
}
}
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
counter: 350
};
}
updateCounter() {
this.state.counter = this.state.counter + this.props.increment;
this.setState({
counter: this.state.counter + this.props.increment;
});
this.setState({
counter: this.state.counter + this.props.increment;
});
}
...
}
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
counter: 350
};
}
updateCounter() {
// this line will not work
this.state.counter = this.state.counter + this.props.increment;
// ---------------------------------
// this will not work as intended
// May not render
this.setState({
counter: this.state.counter + this.props.increment;
});
// what value this.state.counter have?
this.setState({
counter: this.state.counter + this.props.increment;
});
}
...
}
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
counter: 350
};
}
updateCounter() {
// this will work
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
}
...
}
import React, { Component } from 'react';
import axios from 'axios';
// API
import { onLoadUser } from './UserAPI';
class Example extends Component {
state = {
isLoading: false,
user: {},
}
componentDidMount() {
this.onLoadUser();
}
onLoadUser = async () => {
try {
this.setState({ isLoading: true });
const data = await onLoadUser(this.signal.token);
} catch (error) {
this.setState({ isLoading: false });
}
}
render() {
return (
<div>
<pre>{JSON.stringify(this.state.user, null, 2)}</pre>
</div>
)
}
}
import React, { Component } from 'react';
import axios from 'axios';
// API
import { onLoadUser } from './UserAPI';
class Example extends Component {
signal = axios.CancelToken.source();
_isMounted = true;
state = {
isLoading: false,
user: {},
}
componentDidMount() {
this.onLoadUser();
}
componentWillUnmount() {
this._isMounted = false;
}
onLoadUser = async () => {
try {
this.setState({ isLoading: true });
const data = await onLoadUser(this.signal.token);
if(this._isMounted === true) {
this.setState({ user: data, isLoading: true });
}
} catch (error) {
if(this._isMounted === true) {
if (axios.isCancel(err)) {
console.log('Error: ', err.message); // => prints: Api is being canceled
} else {
this.setState({ isLoading: false });
}
}
}
}
render() {
return (
<div>
<pre>{JSON.stringify(this.state.user, null, 2)}</pre>
</div>
)
}
};
}
import React, { Component } from 'react';
import axios from 'axios';
// API
import { onLoadUser } from './UserAPI';
class Example extends Component {
signal = axios.CancelToken.source();
state = {
isLoading: false,
user: {},
}
componentDidMount() {
this.onLoadUser();
}
componentWillUnmount() {
this.signal.cancel('Api is being canceled');
}
onLoadUser = async () => {
try {
this.setState({ isLoading: true });
const data = await onLoadUser(this.signal.token);
this.setState({ user: data, isLoading: true });
} catch (error) {
if (axios.isCancel(err)) {
console.log('Error: ', err.message); // => prints: Api is being canceled
} else {
this.setState({ isLoading: false });
}
}
}
render() {
return (
<div>
<pre>{JSON.stringify(this.state.user, null, 2)}</pre>
</div>
)
}
};
}