higher order ReactJs

• How does hoisting work in JavaScript?

hoisting is a mechanism of JavaScript whereby function declarations are moved to the top of their scope before code execution. this means that you can declare a function after you invoke it in your script. consider the following:

hoisted() // logs "poop"

function hoisted() {
  console.log('poop')
}

this only applies to function declarations, so the following (function expression) would avoid this potential issue:

unHoisted() // returns undefined
const unHoisted = () => {
  console.log('poop')
}

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

setState() ultimately re-renders the page and could potentially be an expensive operation, thus setState() only happens at the end of the callstack.

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

the virtual-DOM only checks changes against a tracked object model as opposed to combing through the entire DOM. if a set state contains an anomaly it refreshes only that single native DOM node to display the new value. thus, the webpage never has to reload a single time through the whole of the user experience.

• What is PureComponent? When to use PureComponent over Component?

React.PureComponent only performs a shallow comparison of state on re-renders compared to React.Component which compares the entire state object (so, including nested state). if you are trying to get every little bit of performance out of your app, you may want to use React.PureComponent. for example, if your state/props should be an immutable object, you could save your app the trouble of checking nested states on re-renders.

• What is a higher order component?

a higher order component (HOC) — similar to a higher order method which accepts functions as arguments or returns a function — is a component that takes a component as an argument and returns a component. here is the simplest possible example of a HOC:

const withElement = Element => () => <Element />

this pattern can allow complex patterns of component logic to be repeated and reusable in a way that protects all of your component and state logic:

const withColor = Element => props => <Element {...props} color="red" />

the above, for example, allows you to pass in a new property color to new Components on the fly without affecting the original component or its logic:

const Button = () => {
  return <button>test</button>
}

const ColoredButton = withColor(Button)

credit to https://flaviocopes.com/react-higher-order-components/ for these very clear examples.

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

user alessioalex from StackOverflow gives a great example:

app.post('/login', function (req, res) {
  const 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');
  }
});