ReactJS Flashcards
What is a React Element
An object representation of some UI component. It describes what you want to see on screen.
What is a React Component
A function or a class which optionally accepts input and returns a React Element (via JSX).
Encapsulated unit of code which has a function on the frontend.
When would you use a Class Component or a Functional Component?
You use a Class Component if you wish to track state, otherwise you’d use Functional.
What are keys
Keys are what help React keep track of what items have changed, been added, or been removed from a list
What is a Controlled Component?
A component where React (Virtual DOM) is in control of the component, as opposed to the native DOM.
What is an Uncontrolled Component?
A component where data is handled by the native DOM as opposed to letting React (Virtual DOM) be in control.
(accomplished by refs)
What are refs
refs are an “escape hatch” which allow direct access to the native DOM. It is achieved by adding the “ref” attribute to a component.
ref’s value is a callback function where the underlying DOM element of what React is representing is returned.
this.input = input} />
What are Keys in React?
Keys are essentially unique identifiers for each element that has been changed, added, or removed from a list <li>
What are the different states of the React Lifecycle?
Mounting
Updating
Unmounting
Error Handling
What are the different Lifecycle events offered for Components?
componentWillMount componentDidMount componentWillReceiveProps componentWillUpdate componentDidUpdate shouldComponentUpdate componentWillUnmount render
What are the order of Lifecycle events in the Mounting state?
componentWillMount
render
componentDidMount
What are the order of Lifecycle events in the Updating state?
componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate
What are the order of Lifecycle events in the Unmounting state
componentWillUnmount
In which lifecycle event do you make AJAX requests and why?
componentDidMount
Guarantee that AJAX doesn’t resolve before the component mounts
Newest React sometimes overcalls componentWillMount, so avoid multiple calls.
Why would you use
React.Children.map(props.children, () => )
instead of props.children.map(() => )
You can’t gauarntee that props.children will be an array, so React gives you React.Children.map as a safeguard.
What does shouldComponentUpdate do and why is it important?
Determines if Reconciliation should be used to update certain elements of the DOM.
Returning false from this would make a statement to React that this component will never likely change ever, maximizing the overall efficiency of React.
What is a SyntheticEvent
Cross-Browser event wrapper
What is SyntheticEvent
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 does createElement do?
createElement is what JSX gets transpiled to and is what React uses to create React Elements
What does cloneElement do?
cloneElement is used in order to clone an element and pass it new props
What is the second argument that can optionally be passed to setState and what is its purpose?
A callback function which will be invoked when setState has finished and the component is re-rendered.
Since setState is asynchronous, it’s second argument is a callback function.
