404: error blog post not found

blog 404

Discuss in words something you learned in class today or this week.

Sometimes we want to hide certain routes from certain users, say if they are not logged in. To do this we will use ProtectedRoutes like so:

// Write ProtectedRoute function here
const ProtectedRoute = ({component: Component, ...rest}) => {
return (
<Route
{...rest}
render={(props) => checkAuth()
? <Component {...props} />
: <Redirect to="/login" />}
/>
)
}
const Router = () => {
return (
<Switch>
<Route path="/login" component={Login} />
<ProtectedRoute exact path="/" component={Home} />
<ProtectedRoute path="/about" component={About} />
<ProtectedRoute path="/car/:id" component={Car} />
</Switch>
);
};

How does hoisting work in JavaScript?

A strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

Why is setState() in React async instead of sync?

According to the docs:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

How is the Virtual-DOM more efficient than Dirty checking?

Dirty-checking checks all of the data at a set interval and checks all of the values in the data structure. The virtual-dom on the other hand has components which have state. It therefore able to update only what needs to be updated.

What is PureComponent? When should you use PureComponent over Component?

Pure Components do not depend or modify the state of variables outside their scope. The definition of Pure Component says that for specific input parameters, we always have a specific output. The output is solely dependent on Input parameters and no other external variable. If the application updates certain data that is observable outside the called function, it can be considered a side effect introduced by the function.

Pure Components in React are the components that do not re-renders when the value of state and props has been updated with the same values. If the value of the previous state or props and the new state or props is the same, the component is not re-rendered. Pure Components restricts the re-rendering ensuring the higher performance of the Component. Similar to Pure Functions in JavaScript, a React component is considered a Pure Component if it renders the same output for the same state and props value. React provides the PureComponent base class for these class components. Class components that extend the React.PureComponent class are treated as pure components.

What is a higher-order component?

A higher-order component (HOC) is an advanced element for reusing logic in React components. Components take one or more components as arguments, and return a new upgraded component. HOCs are commonly used to design components with certain shared behavior in a way that makes them connected differently than normal state-to-props pattern. Some examples from Redux are: mapStateToProps and mapDispatchToProps.

How do you think you might use the checkAuth() function to actually verify a user's email and password?

The checkAuth() function should act as a middle ware to reference the database to see if there is a user with matching email and password credentials as what the user entered into the UI. The email and password should be store to the state of the for a more reliable comparison between the database and the front end. The method should allow the user to enter if there is a user with matching credentials, and deny access otherwise.