React

Question 1

What is React?

Answer 1

Front-end framework featuring deterministic view rendering, declarative UI code with JSX, and components which can be composed into larger components.

Question 2

Why is React’s determinism significant?

Answer 2

Prove that it works! If you can’t prove it, you don’t know it.

Question 3

Why are React components useful?

Answer 3

• Reusability
• Composability
• Locality - understand small units of self-contained code without understanding the context - the code around the unit you’re looking at

Question 4

Why is JSX useful?

Answer 4

• It’s an extension of JS, so you can do things like map, and native conditional expressions, logic, template literals, etc,
• Colocation - the JavaScript and the markup can be in the same file.
• Separate by concern, not by technology. Separate UI code from state logic, from side-effects, instead of separating JS, HTML, CSS.
• Abstract away DOM differences
• Abstract away from underlying tech platform - React can target ReactNative, VR, Netflix Gibbon, Canvas, WebGL, email, etc.

Question 5

Why are synthetic events useful?

Answer 5

• Smooth over cross-platform differences
• They’re automatically memory-managed (don’t need to delegate events or bind and unbind beyond the component life cycle)
• They’re object pooled (prevents janky UI due to garbage collection)

Question 6

Why are hooks useful?

Answer 6

• Write components as functions instead of classes (generally easier to read, reuse, and test)
• Organize code better
• Share reusable logic between different components
• Compose hooks to create your own custom hooks (call a hook from inside another hook)

Question 7

What are container components?

Answer 7

• Components that are connected to the data store and may have side-effects.
• Should not render their own markup — instead delegate rendering to the presentation component they wrap
• Typically, a container component in a React+Redux app would simply invoke mapStateToProps, mapDispatchToProps, and wrap the presentation component with the result
• May use composition to add in functionality

Question 8

What are presentational components?

Answer 8

• Mostly pure components, which, given the same props and context, always return the same JSX
• Don’t have side-effects
• Don’t interact directly with the store
• May use local component state for things like form inputs, as long as you can pass in an initial state so that they can be deterministically tested (hence “mostly” pure)