React Key Concepts

I was given this set of Qs by Emile and found them really useful to understand basic concepts in React. Note that the questions about High Order Component and the component tree lead up to GraphQL.

What’s a component and why do we need it?

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

The purpose of state and props.

There are two types of data that control a component: props and state. Props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.

Props and state are related. The state of one component will often become the props of a child component. Props are passed to the child within the render method of the parent as the second argument to React.createElement() or, if you’re using JSX, the more familiar tag attributes.

What are keys and why are they important?

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays.

What’s a difference between a component, a stateless component and why it matters.

Stateless Component

  • Useful for dumb/presentational components.
  • Presentational components focus on the UI rather than behavior.
  • No Class Needed, No this Keyword
  • Bloated Components and Poor Data Structures Are Easily Spotted
  • Easy to Understand
  • Easy to Test
  • Improved performance
  • Improved performance with superior syntax, testability, and readability
  • We should strive to use stateless functional components wherever possible

Component with State

  • Allow updating of the UI
  • Component truly reusable and encapsulated

In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. You can use stateless components inside stateful components, and vice versa.

Building component trees and interacting with JSON.

Component tree: blogpost → comment list → comment

  • Give the parent the JSON data and pass it via props to the children
  • The individual components are not responsible for retrieving data
  • The lowest component, the page for instance, would fetch some data and give it to the components

 

Working with High Order Component , HOC pattern and what problem its solving.

  • High Order Component (which is just a component) is responsible for fetching the data from the server
  • Knows how to fetch data, how to mutate data.
  • Only 1 place, so that we don’t get multiple places that fetch data.
  • It wraps other components
  • GetJSONFormSERVER component loads some data from the server, and gives the result to the children.
  • The children, don’t need to know how the data got there, they just need to render it.
  • HOCs are common in third-party React libraries, such as Redux’s connect and Relay’s createContainer.
  • HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior.
  • Rather, an HOC composes the original component by wrapping it in a container component.
  • An HOC is a pure function with zero side-effects.
  • Wrapped component receives all the props of the container, along with a new prop, data, which it uses to render its output.
  • More information here, https://facebook.github.io/react/docs/higher-order-components.html

Simple patterns for making interactive components and reacting to events.

handleUpdate(event) {
this.setState({ greetingName: event.target.value })
}

Styling components with CSS and SCSS.
import './HelloWorld.css';

Instantiating components dynamically and mapping data to components.
return this.state.greetings.map(name => (
..
));

Conventions for writing components

  • PropTypes at the top
  • Followed by the mixins
  • Split the life-cycle methods into those that occur before an instance of the component is created (e.g. getInitialState, getDefaultProps) and those which occur during the mounting/updating/mounted cycle (e.g. componentWillMount, shouldComponentUpdate)
  • Declare the lifecycle methods in order of execution
  • Render method to always be last
  • Always set propTypes for validation and self-documentation
  • Multi-line JSX
  • Conditional JSX
  • In-line list iteration
  • Indentation and new line for component attributes

Leave a Reply

Your email address will not be published. Required fields are marked *