State within a Javascript component is a reference to an object. If you mutate that object by changing state using this.state instead of using this.setState, you run the risk of rewriting state the next time this.setState is called. There are ways to avoid this like using setState or immutable helpers such as update().
Inline Elements: Respect left and right margins but not top and bottom. They cannot have a width or height set and allow other items to set to the left and right of them.
Inline Block: Respect top, bottom, width/height margin and padding. Respect height and width definitions.
Block: Allow other elements to sit to their right land left. Respect top and bottom, but will take up the entire width of the parent container unless specified. Create a break between elements above and below unless specified.
Because JavaScript. If you do not take precautions to bind your methods within a React Class Component your methods being invoked within your return will lose context of this and therefor return undefined. You can account for this this by using React.createClass, binding within the constructor(example below), using an ES6 arrow function within the return(which causes performance issues), or most simply, use an ES6 function within the in the class component.
##Will:
functional or “presentational” components simply render data and do not have state. They also do not have access to life cycle methods like componenetDidMount(), render(), or constructor(). You would use a functional component if you were simply rendering a card with data that is not going to be affected by user the or need access to state.
Class based components have access to all of the life cycle methods and state. You typically use a stateful, class component if the user has the ability to manipulate or send actions up to App. An example of would be a user input form. Specifically when using controlled forms your component needs access local state and which requires it to be a class component.
Explain where the appropriate place to do side effect things (think API calls) is, and where it’s inappropriate
Typically you want to separate out API calls and data cleaners into a utils folder. Doing API calls directly within a componentDidMount() or with a component is typically inappropriate because of the data down, actions up model.
Speak to the asynchronous nature of setState, and what your options are for working with this behavior
setState operates asynchronously and does not immediately mutate this.state but creates a pending state transition. This asynchronous behavior is intentional and mainly due to performance issues, creating better UI rendering and to maintaining internal consistency between props and state. A way to account for this is to use the second argument in this.setState, a callback function to call a function of some behavior you want to occcur after state is set.
componentDidMount() - operates as soon as all of the child components have been mounted. This method can be used to deal with asynchronous actions like fetch calls and DOM updates to ensure that components are mounted prior to network requests and/or other asynchronous actions.
componentWillUpdate() - is invoked immediately after an update occurs and is not called after the initial render and can be used for server-side rendering.
constructor() - used for initializing state and binding lifecycle methods to the parent class.
render() - returns react elements
Discuss some of the drawbacks of React, and how you can overcome those (i.e. - Prop drilling can be a pain, using the context API or Redux can be helpful)
React being an open source JS library it is constantly updating, therefor documentation can be lacking. JSX is a limitation that can cause issues regarding design and performance.
With ReactJS you are required to drill props down to their children and grandchildren components from App. This can be difficult and creates scenarios where the state of a grandchild component does not reflect the state of App, causing inconsistencies betweens states. Using the Redux store is one way to account for this. Another method of giving access to global state without props drillign is ThemeContext.Provider.
Specifically for New Relic, how would you benchmark the performance of a single react component? What lifecycle methods would be best for doing this?
Benchmarking within React can be difficult because the nature of the rerenders triggered by setState. In order to account for this, you can use componentDidUpdate() to print metrics after each rerender.