componentDidUpdate
componentDidUpdate(prevProps, prevState) {
if (prevState.pokemons !== this.state.pokemons) {
console.log('pokemons state has changed.')
}
}componentDidUpdate
componentDidUpdate(prevProps, prevState) {
if (prevState.pokemons !== this.state.pokemons) {
console.log('pokemons state has changed.')
}
}react forwardref
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;shouldcomponentupdate
shouldComponentUpdate(nextProps, nextState) {
return true;
}component did mmount
componentDidUpdate(prevProps, prevState, snapshot)shouldcomponentupdate default return
By default, shouldComponentUpdate returns true, but you can override it to return false for cases that you do not want a re-render.casl react
import { AbilityBuilder } from '@casl/ability';
import React, { useState, useContext } from 'react';
import { AbilityContext } from './Can';
function updateAbility(ability, user) {
const { can, rules } = new AbilityBuilder();
if (user.role === 'admin') {
can('manage', 'all');
} else {
can('read', 'all');
}
ability.update(rules);
}
export default () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const ability = useContext(AbilityContext);
const login = () => {
const params = {
method: 'POST',
body: JSON.stringify({ username, password })
};
return fetch('path/to/api/login', params)
.then(response => response.json())
.then(({ user }) => updateAbility(ability, user));
};
return (
<form>
{/* input fields */}
<button onClick={login}>Login</button>
</form>
);
};Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
