This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* In this short assessment, the following code tries to implement the React Suspense API, | |
* but does so incorrectly. There are 3 core issues with how these components utilize Suspense and concurrent mode -- can you find them? | |
* | |
* In your submission, be sure to: | |
* 1) Clearly identify what the 3 core issues are, and how they violate the principles of React Suspense; | |
* 2) Write and submit the code to fix the core issues you have identified in a gist of your own | |
* | |
* If you aren't familiar with Suspense, the docs are a good starting place: | |
* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'preact'; | |
import Redirect from 'react-router/Redirect'; | |
export const checkAuth = (Route, isPrivate) => { | |
const isAuthenticated = false; | |
if (isAuthenticated) { | |
// If route is private, user proceeds, else route is public, redirect user to private root. | |
return isPrivate |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'React'; | |
import Route from 'react-router/Route'; | |
import { checkAuth } from './auth'; | |
const render = (route) => route.childRoutes ? renderChildren(route.childRoutes) : null; | |
const checkLayout = (route) => { | |
const Layout = route.layout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const shallowEqual = (a, b) => { | |
for (let key in a) if (a[key] !== b[key]) return false; | |
for (let key in b) if (!(key in a)) return false; | |
return true; | |
}; | |
const pure = () => (Component) => | |
class PureComponent extends Component { | |
shouldComponentUpdate(props, state) { | |
return !(shallowEqual(props, this.props) && shallowEqual(state, this.state)); |