Questions tagged [react-lifecycle-hooks]

Functions that provides visibility into React component life-cycle.

A component in React has a life-cycle, a number of different phases it goes through from birth to death. We can hook into those different phases to get some pretty fine grained control of our application.

To do this we add some specific methods to our component class which get called during each of these life-cycle phases, we call those methods hooks.

Reference

71 questions
0
votes
1 answer

Why componentDidUpdate is executing repeatedly

I am trying to display user notes on submit. On componentDidMount I am sending a GET request to the server to initially display data. When a user submits a new comment, on componentDidUpdate I'm checking prevState. If there is any difference found…
ConAra
  • 271
  • 5
  • 18
0
votes
1 answer

Loading component not rendering in React.js form component?

I want this loader to render while my fetch is making its request. I have a component which doesn't seem to render though? Isn't my logic and life-cycle usage correct? I've added some comments throughout the form... import React, {…
0
votes
1 answer

Testing useEffect(), Hooks

Hello I'm new testing Hooks, so I'm really lost, tried to find the answer but no result. So the question is, How can I test useEffect from this code? Code: const [ range, setRange ] = useState(DATE_OPTIONS.LAST_30_DAYS) const [ isLoading,…
Jonathan
  • 469
  • 1
  • 6
  • 20
0
votes
4 answers

Invalid Hook calls in React.JS

import React, {Component, useState, useEffect} from 'react'; import {connect} from 'react-redux'; import BigHeader from './bigHeader'; import SmallHeader from './smallHeader'; function isSmall() { if(this.windowWidth < 1307){ return…
Nathan Takemori
  • 139
  • 1
  • 10
0
votes
2 answers

How to receive props only after state of parent has updated?

I'm trying to build a little weather widget, where the geolocation of the user is captured in one component and then passed onto a child component which fetches the weather data (based on the location) and then eventually renders an icon indicating…
suuuriam
  • 687
  • 12
  • 24
0
votes
1 answer

React input value not working in child component

I have two components. Child component will open in modal box. Modal box component will contain add and edit the user. I have passed some values for modal box input and getting that value in getDerivedStateFormProps life cycle hook. Initially it's…
az rnd
  • 643
  • 3
  • 14
  • 28
0
votes
0 answers

How can I deep check nextProps which are coming from Redux store?

I created a Checklist component in which all checks are by default FALSE, as I click to check any of one I set Component State and send State to the Store reducer. And After doing so the problem arrives. The problem is that:- I want Store data in…
B4BIPIN
  • 353
  • 2
  • 11
0
votes
3 answers

componentDidUpdate causing infinite loop

I have a component(showing a list) that renders before the props (redux) are updated ( there is new item that is added to the list and should be displayed but it is not , unless the app is reloaded) . I wrote this to prevent this behaviour : …
0
votes
0 answers

dispatching API actions and loading stage

We know that if a Redux action triggers an API call to a server (whether in Redux middleware or Redux Thunk), it takes time to receive the answer from the server. During this waiting phase, the UI must somehow shows the user that some loading is…
0
votes
1 answer

Re-rending component when the state changes in a different reducer

Okies, So, I am working on a simple recipe collection App, where I have cuisineReducer.js and RecipeReducer.js. and on my admin Dashboard, an admin user is allowed to Create, Delete and Edit any Cuisine groups and also could Create, Delete and…
-1
votes
1 answer

How to use a GraphQL hook in a base app component in react without re-rendering?

I am trying to use redux with GraphQL const sliceQuery = useQuery(ALL_SLICES) on React but it seems as if i cant use useEffect to minimize renders due to GraphQL hooks and their promise Object { data: {}, variables: {}, refetch: (), fetchMore: (),…
1 2 3 4
5