Questions tagged [react-lifecycle]

313 questions
1
vote
0 answers

What is the React Hooks lifecycle for useEffect, useState, and useContext for multiple components?

TLDR: My problem is: useState in the context is not re-rendering in time for useContext from another component to get the updated state values. If you don't want to read the full explanation, a brief explanation of the 3 hooks in different…
Jpark9061
  • 924
  • 3
  • 11
  • 26
1
vote
1 answer

How to reduce duplicative calls to callback functions in componentDidUpdate

I am relatively new to React and Firebase. I read several posts about how cumbersome it is to deal with asynchronous functions that return promises or take in callbacks, and there are very few ways I know of for the final output to show “correctly”.…
1
vote
0 answers

Update area-label of react-calendar for specific date

I have an array of objects. [ { "date":"3 June 2020", "event":"5" }, { "date":"13 June 2020", "event":"3" } ] Now what I want is when the calendar gets renders, a span element will be appended just below the aria-label of date matches with this…
Pranay kumar
  • 1,983
  • 4
  • 22
  • 51
1
vote
1 answer

override existing objects when push into an array - replace or add

suppose we try to connect web socket. web socket server sends some data for fetching client status which represents the online or offline. I tried to store these data into redux (works fine), but I need to change these statuses instantly with…
Amin Azimi
  • 659
  • 9
  • 25
1
vote
1 answer

How can we stop repeated calls in componentDidUpdate() lifecycle of a class based component, like we do in useEffect hook?

useEffect(()=>{ fetch(`${BASE_URL}/requested_url`) .then(response => response.json()) .then(json => setData(json)) }, []); When I used a class based component, I had to use a state boolean to specify when…
1
vote
0 answers

Function generating data according to state value not changing after first render

I am creating a Login and Register screen and I want the use to have an option to choose to register with email or phone number. I am using a radio button for this, and for some reason the function does not change its render when I change the…
tolypash
  • 117
  • 9
1
vote
1 answer

Why is componentWillMount(), componentWillUpdate() and other lifecycle methods in React unsafe?

I can see that componentWillMount() can be unneeded, but how is it "unsafe"?
Jeremy L
  • 3,770
  • 6
  • 41
  • 62
1
vote
1 answer

How to avoid using setState in shouldComponentUpdate() in React?

I created a React component for a forum view. Source code can be seen: https://github.com/WayneHo25/YeePlus/blob/forum-feature/frontend/src/views/ForumPage/Sections/SectionPills.jsx There are some tabs in the tops for several different forums. …
Wayne Ho
  • 45
  • 1
  • 8
1
vote
0 answers

What is the new version of `componentWillReceiveProps(nextProps, nextContext)`?

I'm using this lifecycle method componentWillReceiveProps(nextProps, nextContext), but I'm aware that this is a legacy method. I tried to refactor it with static getDerivedStateFromProps(nextProps, nextContext), and find out that I can't access the…
Chloe Sun
  • 111
  • 1
  • 6
1
vote
1 answer

Why is it prohibited to fetch data from API in constructor of a React Component

I've researched this question and it appears that fetching data in the constructor of a React component may cause some troubles. Can someone explain me what kind of troubles are those. Preferably with examples. what's the difference between fetching…
1
vote
2 answers

Regarding LifeCycles in ReactJS / Problem in the code snippet

I'm trying to learn ReactJS and found out about these lifecycles. However I've a doubt regarding how componentDidUpdate() functions and I want to know the reason behind it. Please take a look at the code below. It is a simple code that calculates…
Divyam Dhadwal
  • 395
  • 3
  • 19
1
vote
3 answers

Component renders 4 times in console.log

First, thanks for reading me. I'm working on react-native using Expo. I set up functions in my app using componentWillMount and componentDidMount. It's working, ok but I have difficulties understanding why my component renders 4 times... I get this…
Kimako
  • 615
  • 2
  • 11
  • 26
1
vote
1 answer

How to replace useEffect with componentDidMount if we call a callback function inside componentDidMount?

by using useEffect, my array state variable did not append the previous value, but componentDidMount did I console.log out the message when using the useEffect, and all the message were correctedly printed out, but the state wasn't stored, if I set…
1
vote
2 answers

React update child component state from parent using getDerivedStateFromProps

Am new to React, I like to maintain state in parent component itself and pass the same to all child components on child component I would like to update the child state from the parent component state am using getDerivedStateFromProps to update it.…
Kannan T
  • 1,639
  • 5
  • 18
  • 29
1
vote
0 answers

How do I stop the parent from completely re-rendering but still have the child re-render based on a change in "state'?

I have a typical customer form that I want the user to review before they submit their information. My thoughts are to have the user click a "submit information" button at the bottom of the form which brings up a pop-up window that summarizes the…
Rafael C
  • 73
  • 2
  • 8