Wax on, Wax off #404

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

— Cooookies!! This week we learned how to use cookies. Cookies are small bits of information that websites store on your browser. They are key-value pairs like objects but they only contain text. They help the browser make certain decisions using the content that’s been stored in these cookies.

How does hoisting work in JavaScript?

— Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function). The let and const Keywords Variables defined with let and const are hoisted to the top of the block, but not initialized.

Why is setState() in React Async instead of Sync?

— This is because setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive. Thus the setState calls are asynchronous as well as batched for better UI experience and performance.

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

— In a situation like that, React can simply listen for change events on the state and queue up re-rendering. Long story short, the virtual DOM is more efficient than the Dirty checking simply because it prevents all the unnecessary re-renders. Re-rendering only occurs when the state changes.

What is PureComponent? When to use PureComponent over Component?

— Pure Components in React are the components which 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. To sum it up, PureComponent is useful when: You want to avoid re-rendering cycles of your component when its props and state are not changed, and; The state and props of your component are immutable, and; You don’t plan to implement your own shouldComponentUpdate lifecycle method.

What is a higher order component?

— A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.

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

— Here’s how you can do it with Express.js:

1) Check if the user is authenticated: you can have a middleware function named CheckAuth which I use on every route that needs the user to be authenticated:

function checkAuth(req, res, next) {
  if (!req.session.user_id) {
    res.send('You are not authorized to view this page');
  } else {
    next();
  }
}

You can use this function in your routes:

app.get('/my_secret_page', checkAuth, function (req, res) {
  res.send('if you are viewing this page it means you are logged in');
});

2) The login route:

app.post('/login', function (req, res) {
  var post = req.body;
  if (post.user === 'john' && post.password === 'johnspassword') {
    req.session.user_id = johns_user_id_here;
    res.redirect('/my_secret_page');
  } else {
    res.send('Bad user/pass');
  }
});

3) The logout route:

app.get('/logout', function (req, res) {
  delete req.session.user_id;
  res.redirect('/login');
});

Austin Coding Academy