i have this code:
that.props.getChats(that.props.state.chatModule.login.body.agent[0].company_id, that.props.state.chatModule.sessions.chatHashesChoosed)
that.scrollChatToBottom(sessionHash)
that.props.getChats is a function creator which use async ajax call.
i want that.scrollChatToBottom to run only after the ajax call return. the thing is that because i use this function creator, i dont get any promise or someting...
i dont want to make the call inside the component.
I guess getChats will retrieve some data and update the app state, which then trigger your component to be re-rendered according to the newly retrieved data? If so, you can trigger scrollChatToBottom in componentDidUpdate, e.g.
componentDidUpdate(prevProps, prevState) {
if (this.props.chatData !== NULL) { // assuming chatData is the data retrieved by getChats
// Do scrollChatToBottom here
}
}
Related
I'm learning React (with hooks) and wanted to ask if every single API call we make has to be inside the useEffect hook?
In my test app I have a working pattern that goes like this: I set the state, then after a button click I run a function that sends a get request to my API and in the .then block appends the received data to the state.
I also have a useEffect hook that runs only when the said state changes (using a dependency array with the state value) and it sets ANOTHER piece of state using the new data in the previous state. That second piece of state is what my app renders in the render block.
This way my data fetching actually takes place in a function run on a button click and not in the useEffect itself. It seems to be working.
Is this a valid pattern? Thanks in advance!
Edit: example, this is the function run on the click of the button
const addClock = timezone => {
let duplicate = false;
selectedTimezones.forEach(item => {
if (item.timezone === timezone) {
alert("Timezone already selected");
duplicate = true;
return;
}
});
if (duplicate) {
return;
}
let currentURL = `http://worldtimeapi.org/api/timezone/${timezone}`;
fetch(currentURL)
.then(blob=>blob.json())
.then(data => {
setSelectedTimezones(prevState => [...prevState, data]);
}
);
}
Yes, apis calls that happen on an action like button click will not be part of useEffect call. It will be part of your event handler function.
When you call useEffect, you’re telling React to run your “effect”
function after flushing changes to the DOM
useEffect contains logic which we would like to run after React has updated the DOM. So, by default useEffect runs both after the first render and after every update.
Note: You should always write async logic inside useEffect if it is not invoked by an event handler function.
Yes, you can make api requests in an event handler such as onClick.
What you don't want to do is make a request directly inside your functional component (since it will run on every render). As long as the request is inside another function and you only call that function when you actually want to make a request, there is no problem.
I'm working on a react app and using redux to manage the store variables. The store variables get updated on an API call on the homepage, and are used in api calls in other components as query parameters.
I set the store variables in the homepage component like so:
API.get("EmployerApiGw", "/employer/" + this.state.shadowAccountId).then(resp => {
if (resp.items.length > 0) {
this.setState({
isValid: true,
openDialog: false
});
this.props.updateAccountid(this.state.shadowAccountId);
this.props.updateCompanyId(resp.items[0].companyid);
} else {
this.setState({
isValid: false
});
}
});
I'm having an issue where the components get mounted before the store variables are updated in the api call. This causes the other api calls to fail because the store variables are null at that point.
API.get("EmployerApiGw", "/employer/" + this.props.accountid + "/billingstatements", {
queryStringParameters: { companyid: this.props.companyinfo.companyid }
})
My temporary fix has been to use componentDidUpdate() to call componentDidMount() if the props have changed (I'm passing the store variables as props to the components). This still causes the invalid api calls to run, but re-renders the components once the store variables have updated.
componentDidUpdate(prevProps) {
if (JSON.stringify(prevProps) !== JSON.stringify(this.props)) {
this.componentDidMount();
}
}
This still causes unnecessary api calls to be made, and clutters up the console.
I was wondering if there is a way to make components wait until the store variables have finished updating.
Thank you.
I would put a loading spinner in the child component and have that show by default. Then I would put an if statement around your second API call so it only gets called if the arguments you need have already been initilised. Something like this:
if (this.props.accountid && this.props.companyinfo && this.props.companyinfo.companyid) {
//do api call
}
Then use componentDidUpdate to watch for when the props change. When they are no longer null you can call your API and replace the loading spinner with the rest of the child component you were waiting for API data to render.
I am new to React, so bear with me please. I have a component that calls another component that takes a property. This property will get it's value on a callback of a function, something like this:
render(){
myFunc((p) => {
if(!_.isEqual(p, this.state.myProp))
this.setState({myProp: p})
});
return <MyComponent myProp={this.state.myProp}/>
}
myFunc will or will not make an API request and depending on that will call the callback sooner or later. This seems to work fine when API request is made and the callback takes longer to return. However, when the request is not needed and callback returns instantaneously (or almost) I am getting a Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
What am I doing wrong and what is the right way to approach this? Where would be the right place to put this code? Basically what I need is to re-render MyComponenent if this.state.myProp changes
You shouldn't be calling setState inside the render method, you might end up having an infinite loop.
The call to myFunc should be somewhere else (depending on the business logic you have). When the function finishes, it will update the state and then trigger a re-render so MyComponent will get the latest value.
UPDATE
I don't know which conditions will require calling myFunc again, but you can do:
state = {
myProp: null // or some other value that MyComponent can handle as a null state
}
componentDidMount () {
myFunc((p) => {
if(!_.isEqual(p, this.state.myProp)) // This is needed only if you get null back from the callback and you don't want to perform an unnecesary state update
this.setState({myProp: p})
}
}
render(){
const { myProp } = this.state
// You can also do if (!myProp) return null
return <MyComponent myProp={myProp}/>
}
I'm passing some params from a page to the other to make an API call. What i've notice is when i hard code the value i'm suppose to get into the http call, i get the desired results but when i inject the value from the params into the call, if fails to work. so i thought the params wasn't able to pass till i did an alert in the render function and what i realized was the alert prompts twice, the first one is empty and the second prompt brings the value from the previous page, so then meaning in my componentDidMount, the call
state = {
modalVisible: false,
posts : [],
itemID: ''
}
componentDidMount = () => {
const { navigation } = this.props;
this.setState({itemID : navigation.getParam('itemID')})
api.get('/items/'+`${this.state.itemID}`+'/test_items_details/'+`${userID}`+'/posts').then((response) => {
let data = response.data.data
this.setState({posts: data})
console.log(JSON.stringify(this.state.posts))
})
}
As per the docs, it states
setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.
Your code snippet is trying to access the state variable before it has in fact been updated.
You can do two things here:
Simply use navigation.getParam('itemID') so now your URL becomes /items/${navigation.getParam('itemID')}/test_item_details/${userID}/posts.
Use the setState callback, the snippet is added below.
Snippet:
this.setState({ itemID: navigation.getParam('itemID') }, () => {
// this.state.itemID is now set, you can make your API call.
});
If your only intention to use this.state.itemID is for the URL, I would opt for the first option.
I'd like to call a component's function when network fetch completes.
function callRestApi({config, schema}) {
return axios(config).then((response) => {
if (schema) {
var data = normalize_json(response.data, schema)
response.entities = data.entities
}
return response
})
}
function* fetchEventList(action) {
try {
const response = yield call(callRestApi, action.payload);
// here I want to call a component's method if possible
yield put({type: action.response.action_type_success, response});
} catch (e) {
}
}
I can think of two ways to do this, and wonder if one is prefered over another or if there's a better way?
method1:
I include the component in the action payload so that I can call the method
method2:
on action.response.action_type_success, change redux state.
Then, component's componentWillReceiveProps compare if the state variable changed and calls the method
The second. You are using redux-saga to handle side effects, so keep it that way. You could add a callback to the action as method1 but I wouldn't mix concepts.
If you update the store on success, it will re-render the component and as you said you could check the newly updated prop in componentWillReceiveProps and trigger the function, however, check nextProps instead of this.props (but I bet you already know that).
This way everything flows one way, no callback hell :) + you can easily test the component just by passing a prop.
Although it's not a bad pattern per se, passing callbacks would be bi-directional flow, which breaks the first rule of flux: Unidirectional flow.