Intro Flashcards
How does React work?
React creates a virtual DOM. When state changes in a component it firstly runs a “diffing” algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.
What is Context?
Context provides a way to pass data through the component tree without having to pass props down manually at every level. Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. Using context, we can avoid passing props through intermediate elements.
What is props in React?
Props are inputs to a React component. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes. i.e, They are data passed down from a parent component to a child component.
The primary purpose of props in React is to provide following component functionality:
Pass custom data to your React component.
Trigger state changes.
Use via this.props.reactProp inside component’s render() method.
For example, let us create an element with reactProp property,
This reactProp (or whatever you came up with) name then becomes a property attached to React's native props object which originally already exists on all components created using React library. props.reactProp;
What is the use of refs?
Refs are an escape hatch which allow you to get direct access to a DOM element or an instance of a component.
Refs provide a way to access DOM nodes or React elements created in the render method. They should be avoided in most cases, however, they can be useful when we need direct access to DOM element or an instance of a component.
There are a few good use cases for refs:
Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.
Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef(); }
render() {
return <div>; }
}</div>
What is Jest
Jest is a JavaScript unit testing framework made by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It’s often used for testing React components.
What are the advantages of ReactJS?
Increases the application’s performance with Virtual DOM
JSX makes code is easy to read and write
It renders both on client and server side
Easy to write UI Test cases and integration with tools such as JEST.
What are the major features of ReactJS?
It uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive.
Supports server-side rendering
Follows Unidirectional data flow or data binding
Uses reusable/composable UI components to develop the view
What are the differences between a class component and functional component?
Class-based Components uses ES6 class syntax. It can make use of the lifecycle methods. Class components extend from React.Component. In here you have to use this keyword to access the props and functions that you declare inside the class components.
Functional Components
Functional Components are simpler comparing to class-based functions.
Functional Components mainly focuses on the UI of the application, not on the behavior.
To be more precise these are basically render function in the class component.
Functional Components can have state and mimic lifecycle events using Reach Hooks
Where in a React component should you make an AJAX request?
componentDidMount is where an AJAX request should be made in a React component.
This method will be executed when the component “mounts” (is added to the DOM) for the first time. This method is only executed once during the component’s life. Importantly, you can’t guarantee the AJAX request will have resolved before the component mounts. If it doesn’t, that would mean that you’d be trying to setState on an unmounted component, which would not work. Making your AJAX request in componentDidMount will guarantee that there’s a component to update.
What is the difference between state and props?
The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.
Props (short for properties) are a Component’s configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data - callback functions may be passed in as props.
What’s the difference between a Controlled component and an Uncontrolled one in React?
This relates to stateful DOM components (form elements) and the React docs explain the difference:
A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”.
A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.
What does it mean for a component to be mounted in React?
It has a corresponding element created in the DOM and is connected to that.
What are Fragments?
It’s common pattern in React which is used for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
When rendering a list what is a key and what is it’s purpose?
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. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.
*Most often you would use IDs from your data as keys. When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort. It is not recommend to use indexes for keys if the items can reorder, as that would be slow.
React Hooks: What is useState() in React?
…
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(…);
…
const setCount = () => {
setCounter(count + 1);
setMoreStuff(...);
...
};
useState is one of build-in react hooks. useState(0) returns a tuple where the first parameter count is the current state of the counter and setCounter is the method that will allow us to update the counter's state. We can use the setCounter method to update the state of count anywhere - In this case we are using it inside of the setCount function where we can do more things; the idea with hooks is that we are able to keep our code more functional and avoid class based components if not desired/needed.
What are stateful components?
If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These Stateful components are always class components and have a state that gets initialized in the constructor.
class App extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
// omitted for brevity
}
}
How would you prevent a component from rendering in React?
Return null from the render method.
What are Stateless components?
If the behaviour is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for stateless functional components.
There are a lot of benefits if you decide to use stateless functional components here; they are:
easy to write, understand, and test, and
you can avoid the this keyword altogether.
Stateful/Container/Smart component:
class Main extends Component {
constructor() {
super()
this.state = {
books: []
}
}
render() {
}
}
Stateless/Presentational/Dumb component:
const BooksList = ({books}) => {
return (
<ul>
{books.map(book => {
return <li>book</li>
})}
</ul>
)
}
