reactjs


Infinite componentDidUpdate() calls with react-router


I am new to react-router and right now I have following routes in my app:
<Router history={browserHistory}>
<Route path="/" component={MainLayout}>
<Route path="/v/:username/:reponame/:page/:perPage" component={Results} />
</Route>
</Router>
As you can see, there's a MainLayout component that includes an <input type="text"> which is used to connect to Github API and retrieve list of issues for a certain repo.
Then the Results component steps in. Here's the code for it's componentDidMount():
componentDidMount() {
const {
username,
reponame,
page,
perPage
} = this.props.params;
this.sendRequest(username, reponame, page, perPage);
}
sendRequests essentially contains the ajax query for fetching the output data, after which it's being set into the component's state:
this.state = {
data: [], // here
lastPage: -1,
errorMessage: ''
}
Now this works pretty well till the very moment when one wants to change the value of an input.
As I see, the Result component doesn't unmount. Instead, it invokes componentWillReceiveProps() and updates the existing component. AFAIK it is safe to perform side calls in componentDidUpdate() so I just copied the code above from componentDidMount() and pasted it in there. This way, though (and it is absolutely reasonable) componentDidMount() is being invoked over and over again.
The only workaround I came up with at the moment is comparing old and new data in the sendRequest() itself and invoke setState() inside of it only if it differs via deep-equal package, so it looks like this:
if (!equal(res, this.state.data)) {
this.setState({
...this.state,
data: res,
lastPage
});
}
Is this considered to be an ok pattern or there is a better way to solve this issue?
You should not use setState inside the cDM lifecycle. as it might trigger re-render, which will cause your infinite loop.
Updating the state after a component mount will trigger a second render() call and can lead to property/layout thrashing.
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md

Related Links

Update sibling component on mutation?
React reroute on ajax call
Webpack Dev Server with React Hot Loader
Change tab content using router
child of the component “this” value and how do I get to parent component?
Initial state Redux store - invalid prop
Mutating outer variables inside React Component
How to return existing reactElement from render
Can a Redux store lead to a memory leak?
Uncaught TypeError: Cannot read property 'showModal' of null
relayjs returning strange values for connections via REQUIRED_CHILDREN after mutation
React native: animatable with navigationbar
Firebase hosting + React with webpack
How to ftp my React app using Coda
Get keyboard height or top position when keyboard open
<Link to={} not working>

Categories

HOME
oauth-2.0
reactjs
azure-active-directory
openacc
cxf
microcontroller
crash
opc-ua
browser-cache
google-api-oauth
guidewire
element
eclipse-orion
box2d
sha1
exchange-transport-agents
draw2d
spring-webflow
javaagents
devexpress-mvc
handle
policy
setup-project
dynamics-ax-2012-r3
semantic-ui-react
ios9
textview
qt-designer
openvms
apache-falcon
sdl-2
abide
oracle-bpm-suite
form-fields
yelp
gem-fury
tapply
qt-quick
automapper-4
stream-socket-client
dynamic-linking
tsc
stringbuilder
mongodb-3.3
konakart
hfp
django-taggit
instabug
gnu-sort
libgcrypt
jts
identifying
syncano
p4python
pdcurses
teamwork
avd
cl.exe
optimistic-locking
nsq
qxorm
javadb
information-hiding
clearcanvas
parallel-port
facebook-java-api
xml-validation
angularjs-select2
record-locking
usersettings
cocotron
cloudmade
gpl
nsregularexpression
m3u
wpml
netzke
aspmenu-control
nsscrollview
cgaffinetransform
log-shipping
xpolog
service-layer
jquery-attributes
mysql-logic
scala-designer
content-delivery-network
paperless

Resources

Encrypt Message