Questions tagged [react-lifecycle]
313 questions
1
vote
2 answers
Trace which change of props or state trigger `componentDidUpdate`
I'm making a webpage with react-monaco-editor. I realized that after loading the first page, componentDidUpdate is triggered many times, which does not look normal.
I tried to add logs in componentDidUpdate:
componentDidUpdate(prevProps,…
SoftTimur
- 5,630
- 38
- 140
- 292
1
vote
2 answers
React useMemo x is not a function
I have a react app with hooks where I needed to replicate the behavior of componentWillMount. I read here that for this purpose useMemo could be used so my code roughly looks like this
const Component = ({
some props,
...props
}) => {
…
KiYa
- 11
- 3
1
vote
0 answers
React Native: Why is shouldComponentUpdate being called when neither props nor state have changed?
In my React Native app I have a PureComponent where I log whether props or state have changed each time shouldComponentUpdate() is called, like this:
shouldComponentUpdate(nextProps, nextState) {
console.log(JSON.stringify(this.props) ===…
gkeenley
- 6,088
- 8
- 54
- 129
1
vote
0 answers
Can't find props from redux store
In the same component, I get the value of this.props.users from redux store in render() function but can't get the value in constructor() function. I mean in render function I got value from this.props.users but in constructor function I got null.…
Ferdous Hasan
- 48
- 5
1
vote
1 answer
componentWillUnmount called before component unmounts
I'm trying to understand when componentWillUnmount is called. I have this class-based component:
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date().toLocaleString()…
Sam
- 41
- 3
1
vote
1 answer
What does it change to declare a constant above or bellow a React functional component?
My question is what does it change to declare a constant above or bellow a React functional component (or a class component also) ?
for example what is the difference if I do :
const myName = "Olivier";
const myReactComponent = () => {
…
OlivierL
- 23
- 5
1
vote
4 answers
Issues upgrading async componentDidMount() to async useEffect()
// UPDATE: The issue was using the state immediately after setting it inside useEffect(). See my answer HERE for details.
I'm trying to upgrade one of my React app pages from class component to functional component with Hooks. However, I have some…
AndrewHoover898
- 159
- 1
- 9
1
vote
1 answer
How to Use componentDidMount() in Functional Component to execute a function
I have a functional component which had a button to call a method in it. Now i want to get rid of the button and call that method without any actions once the component loads.
I am making API calls inside this method and passing on the results to…
Jainam Shah
- 489
- 1
- 6
- 23
1
vote
2 answers
Setting the state in a component from localStorage
I'm building a multi-step form in React and one of my objectives is to save the user's input if they haven't finished filling in the form. I have saved the user's input in the browser's localStorage by using setItem().
The input fields set the local…
kal94
- 15
- 3
1
vote
0 answers
How can i unmount All the State Values in react ? is this possible?
this.state = {
loading: false,
timer: false,
showZero: false,
pin: '',
error: {
emptyPin: false,
checkPin: false,
wrongPin: false,
message: '',
devices: undefined,
type: 999,
checkBoxStr: '',
},
showDialog:…
Vijay
- 275
- 2
- 11
1
vote
2 answers
React basics - setState() not updating counter in the state
I'm moving my first steps in the React world with a very basic app and I'm already struggling with the setState() function. I want to update a counter in the state each time the button gets clicked.
Unfortunately, the counter always stays 0. This…
GD1
- 77
- 4
- 12
1
vote
1 answer
How to properly return updated state when using getDerivedStateFromProps lifecycle method?
For example we have such state:
state = { hasSomething: true, anotherKey: '', ... }
and we should update only 'hasSomething':
static getDerivedStateFromProps(nextProps) {
if (nextProps.accessKey === 'admin') {
return {
…
Oh this crazy voices
- 67
- 7
1
vote
1 answer
TypeError: react_1.useEffect is not a function
I am trying to make us of useEffect in my React component but I am encountering an issue with the following error:
TypeError: react_1.useEffect is not a function
and
Uncaught (in promise) TypeError: react_1.useState is not a function
I have…
Ghost Checker
- 31
- 3
1
vote
0 answers
How do I stop my componentDidMount from getting called twice?
how do I stop my componentDidMount from getting called twice?
Following is my code:
class BarSearchFormComponent extends Component {
constructor(props) {
super(props);
this.searchInput = React.createRef();
this.onChange =…
Rehab
- 45
- 5
1
vote
1 answer
How to avoid constant api calls in componentDidMount
I need to call fectchData when there's no testData in context store or input ur is different from saved testData[0].ur.
But this constantly request API if there's ur has empty testData. Which condition will make trick?
componentDidMount() {
…
jacobliu609
- 56
- 5