React Flashcards
What is the difference between state and props?
Props are immutable, a component’s state shouldn’t be changed from outside that component.
What is React?
React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications.
What happens during the lifecycle of a React component at a high level?
Initialization, State/Property Updates, Destruction
What are the different component lifecycle methods?
Initialization (getInitialState, getDefaultProps, componentWillMount, render, componentDidMount), Update (componentWillRecieveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate), Destruction (componentWillUnmount)
What is JSX?
JSX embeds raw HTML templates inside JavaScript(ES2015) code. JSX code by itself cannot be read by the browser; it must be transpiled into traditional JavaScript using tools like Babel and webpack. JSX is not required to use React.
What is Flux?
Flux is an architectural pattern that enforces unidirectional data flow — its core purpose is to control derived data so that multiple components can interact with that data without risking pollution. (Action > Dispatch > Store > View). Store is single source of truth.
What are stateless components?
Stateless components (a flavor of “reusable” components) are nothing more than pure functions that render DOM based solely on the properties provided to them. This component has no need for any internal state — let alone a constructor or lifecycle handlers. The output of the component is purely a function of the properties provided to it.
What happens when you call setState?
The first thing React will do when setState is called is merge the object you passed into setState into the current state of the component. This will kick off a process called reconciliation. The end goal of reconciliation is to, in the most efficient way possible, update the UI based on this new state. To do this, React will construct a new tree of React elements (which you can think of as an object representation of your UI). Once it has this tree, in order to figure out how the UI should change in response to the new state, React will diff this new tree against the previous element tree. By doing this, React will then know the exact changes which occurred, and by knowing exactly what changes occurred, will able to minimize its footprint on the UI by only making updates where absolutely necessary.
What’s the difference between an Element and a Component in React?
Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of some UI.
A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets transpiled to a createElement invocation).
When would you use a Class Component over a Functional Component?
If your component has state or a lifecycle method(s), use a Class component. Otherwise, use a Functional component.
What are refs in React and why are they important?
Similarly to keys, refs are added as an attribute to a React.createElement() call, such as <li>. The ref serves a different purpose, it provides us quick and simple access to the DOM Element represented by a React Element.
Refs can be either a string or a function. Using a string will tell React to automatically store the DOM Element as this.refs[refValue]
In order to use them as a function you add a ref attribute to your component whose value is a callback function which will receive the underlying DOM element or the mounted instance of the component as its first argument.</li>
What are keys in React and why are they important?
Keys are what help React keep track of what items have changed, been added, or been removed from a list. It’s important that each key be unique among siblings. Keys make reconciliation more efficient when dealing with lists because React can use the key on a child element to quickly know if an element is new or if it was just moved when comparing trees.
What is the difference between a controlled component and an uncontrolled component?
In a controlled component, React is the single source of truth for that input fields value and handles its changes. An uncontrolled component lets the DOM handle the field (like vanilla HTML) and we can access that value later with a ref. It’s typically recommended that you favor controlled components over uncontrolled components.
In which lifecycle event do you make AJAX requests and why?
AJAX requests should go in the componentDidMount lifecycle event.
There are a few reasons for this,
Fiber, the new React reconciliation algorithm, has the ability to start and stop rendering as needed for performance benefits. One of the trade-offs of this is that componentWillMount, the other lifecycle event where it might make sense to make an AJAX request, will be “non-deterministic”. What this means is that React may start calling componentWillMount at various times whenever it feels like it needs to. This would obviously be a bad formula for AJAX requests.
You can’t guarantee the AJAX request won’t resolve before the component mounts. If it did, that would mean that you’d be trying to setState on an unmounted component, which not only won’t work, but React will yell at you for. Doing AJAX in componentDidMount will guarantee that there’s a component to update.
What does shouldComponentUpdate do and why is it important?
Above we talked about reconciliation and what React does when setState is called. What shouldComponentUpdate does is it’s a lifecycle method that allows us to opt out of this reconciliation process for certain components (and their child components). Why would we ever want to do this? As mentioned above, “The end goal of reconciliation is to, in the most efficient way possible, update the UI based on new state”. If we know that a certain section of our UI isn’t going to change, there’s no reason to have React go through the trouble of trying to figure out if it should. By returning false from shouldComponentUpdate, React will assume that the current component, and all its child components, will stay the same as they currently are.
How do you tell React to build in Production mode and what will that do?
Typically you’d use Webpack’s DefinePlugin method to set NODE_ENV to production. This will strip out things like propType validation and extra warnings. On top of that, it’s also a good idea to minify your code because React uses Uglify’s dead-code elimination to strip out development only code and comments, which will drastically reduce the size of your bundle.
Why would you use React.Children.map(props.children, () => ) instead of props.children.map(() => )
It’s not guaranteed that props.children will be an array. React only makes props.children an array if there are more than one child elements. You want to favor React.Children.map because its implemention takes into account that props.children may be an array or an object.
Describe how events are handled in React.
In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers.
What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM.
