Notes on Thinking in React & Higher Order Functions

React Docs - Thinking in React

• What is the single responsibility principle and how does it apply to components?

It is a technique for deciding whether a new function or object should be created. It applies to components by saying that a component should only do one thing, so if it grows into needed to more multiple things, those tasks should be broken into smaller subcomponents.

• What does it mean to build a ‘static’ version of your application?

It is a version that passes data using props, reusing other components. It does not use state, because a static version is by definition not interactive (i.e. data does not change over time). It can top-down or bottom-up in data hierachy.

• Once you have a static application, what do you need to add?

Interactivity. This is done in React by using state.

• What are the three questions you can ask to determine if something is state?

Time for another mneumonic acronym! This time the acronym is PUC:

• Props - is the piece of data passed in via props from parent? If yes, likely not state.
• Unchanged - does the piece of data remain unchanged throughout rendering and use? If yes, likely not state.

• Computable - can the piece of data be computed based on other states or props in the component? If yes, likely not state.

• How can you identify where state needs to live?

The acronym this time is IFOC:

• Identify - identify all components that render anything based on that state.
• Find - find a component above all others that requires the state (i.e. common owner component).
• Owner - figure out who the owner should be (either common owner or a different component further up in the hierachy)
• Create - if sensible owner can’t be found, create a new component meant just for holding the state and include it in hierachy above the common owner component.

Higher-Order Functions

• What is a “higher-order function”?

A function that operates upon other functions. This could be through taking other functions as arguments or by returning other functions.

• Explore the greaterThan function as defined in the reading. In your own words, what is line 2 of this function doing?

Ensuring that m returns only if m is in fact greater than n.

• Explain how either map or reduce operates, with regards to higher-order functions.

In regards to higher-orders, reduce takes in the parameters of an array, a start value, and a combining function. It creates new values by going through an array, taking single elements and combining them with the current value (set equal to start value at the beginning).

Things I want to know more about

I scrolled down to the exercises in the second article and read about flattening by using the reduce method in concert with the concat method, and it seems very useful.