Introduction React router is a very popular react library to add the routes. We went through the code base of react router, and there are…
React router is a very popular react library to add the routes. We went through the code base of react router, and there are other things to learn which you can apply in your repository as well.
In React router, the componendDidUpdate
lifecycle method is added conditionally based upon the environment variable. If the environment variable is DEV
, then only the above lifecycle method is added.
if (__DEV__) {
React.propTypes = {
...
}
Route.prototype.componentDidMount = function() {
...
}
Route.prototype.componentDidUpdate = function(prevProps){
...
}
}
This is required in react router because you do not want the componentDidUpdate
and other unnecessary lifecycle method to run when in production. Usually when we face such condition in our codebase, we use it as follows
class Route extends React.Component {
...
componentDidUpdate{
if(__DEV__){
...// code to run in componendDidUpdate
}
}
}
But in react router, we learn that you can attach the lifecycle method to the component's prototype. Advantage of doing so is that the componendDidUpdate
will not be called every time the props are updated.
React provides an api to get the list of children and other helper methods like count
, map
, forEach
etc..
React.Children.count(children)
Like for example,
function MySwitch(props) {
return <div>
No of children : {React.Children.count(props.children)}
</div>;
}
function MyRoute(props) {
return <div>{props.path}</div>;
}
So the code
<MySwitch>
<MyRoute path="/" />
<MyRoute path="/app" />
</MySwitch>
would produce the output
No of children: 2
React router uses this in Switch.js to loop through the children (i.e. Route component), and get the matched component element, and its path.
We can use React.Children when we are also building our library and there is a need to loop through the child components.
This is an interesting problem. We know that we can define static methods to React class. For example
class Wrapper extends React.Component{
static getName = () => { return "abc"}
}
OR
class Wrapper extends React.Component{
}
Wrapper.getName = () => { return "abc" }
In both the cases, Wrapper.getName()
will return "abc"
But when we apply an Higher Order Component to Wrapper, this method is not available to it.
For example
const Enhanced = enhance(Wrapper)
Here we are getting new component out of Wrapper, by using the enhance
function. This function will do some logic, and return our enhanced component. But
Enhanced.getName()
// undefined
will be undefined. So the static method of Wrapper
is not carry forwaded to Enhanced
.
This can be overcome by copying the required static methods inside the enhance function. Or we can also use the library hoise-non-react-statics. It is used to hoist the non-react static methods. Meaning the Wrapper.propTypes
and other such react specific methods will not be copied to Enhance
.
Introduction React router is a very popular react library to add the routes. We went through the code base of react router, and there are…