React Docs - Thinking in React
single responsibility principle and how does it apply to components?
A component should be responsible for one thing
Build something without any interactivity. Build a website takes lots of typing, no thinking; whereas interactivity requires lots of thinking and little typing
we must find the minimal but complete representation of UI state
- Does it remain unchanged over time? If so, it isn’t state.
- Is it passed in from a parent via props? If so, it isn’t state.
- Can you compute it based on existing state or props in your component? If so, it definitely isn’t state!
For each piece of state in your application:
- Identify every component that renders something based on that state.
- Find their closest common parent component—a component above them all in the hierarchy.
- Decide where the state should live:
- Often, you can put the state directly into their common parent.
- You can also put the state into some component above their common parent.
- If you can’t find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component.
Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions
greaterThan function as defined in the reading. In your own words, what is line 2 of this function doing?
it returns a function that takes a single input (m) and it returns true if m > n, otherwise it returns false
map or reduce operates, with regards to higher-order functions.
map calls a function on each element, returning a new array. reduce repeatedly applies a function to accumulate a single value. Both utilize passed in functions to shape their operation.