React Flashcards
Learn about react fundamental s
Which if the following is used when adding an event to a button in react?
A onClick
B. onclick
onClick
What is the convention of defining a class in react?
Use lowercase for class the class extends component You normally states to access or modify properties values.
What is the correct method of declaring a class name for a JSX element?
Use className
How do you add and output dynamic content within a react function.
Use the curly braces and or props
What is a restriction faced in react JSX
Class is reserved
You advised to only have one route element per component.
Can you change states directly?
No, it is immutable. Use setState to change state and notify dom
Can you change states directly?
No, it is immutable. Use setState to change state and notify dom
True or false. The function element found in setState merges the changes with the old state.
False
The function used in the hook usestate does not merge. It creates a new state.
What are the two ways in can modify the Dom in react?
state taken from react component
and props which use Hooks
What is a example of react Hook?
useState
What is the difference in the way states and hooks handle other state data?
In classes that use state , any changes made are merged with previous state.
In functions props which use Hooks, the state creates new state so you need to include this change in function that changes state.
What is React.createElement?
Method for rendering JSX , Takes the following arguments: an element which is rendered to the Dom, configuration other wise a object, then children or what will be nested in side the elements.
How can one render iteration in react
JavaScript provides a array method Array.protoype.map which can be used render an array of objects.
Syntax let new array = array.map( funct callback( current Value, [, index [, array]] { return element of new array }[ , thisArg])
const arrayx = [ 1 , 2 , 3 , 4 ] const map1 = arrayx.map( x => x + 1 )
When is it not ideal to use map()
When you are not using the returning array , not returned a value from callback.
How would you attempt to handle JavaScript errors beyond your control , like server request.
You can wrap your code using error boundaries class. This return a message in production mode.
How can you run locally scoped class names for CSS styles that are easy to identify without adding complexity with naming conventions.
You can use CSS modules .
React V2,, + -require you add modules in the name using [name]. module.css
Older version require ejection and modifications
What are error boundaries?
Error boundaries are react components that handle JavaScript errors by catching them in their child components tree. Allowing you to log errors and display fall back UI rather than let the UI crash.
A component becomes a errorBoundary when it defines either or both getDerivedStateFromError or componentDidCatch lifecycle methods.
How does React monitor changes in state in the mapping of React arrays
Map has key which can provide unique identifier for each element in the state array.
What are the benefits of spread operators in Rest state management?
Spread operators can be used when setting state in order to avoid directly updating the original state object.
What is the purpose of the restructuring in useState and hooks?
useState uses restructuring to split array into current state and the function to set state.
What are the benefits of using arrow functions in react components callbacks.
Arrow functions have a key feature that shares same lexical ‘ this ‘ as surrounding code. It does not require the literal use of binding with ‘this’ operators unlike function.
Snipet “rce” means
Create a customisation react class component.
Snipet “rafcp” means
Create a react function component with props
Snipet rafce means
Create a react arrow function component
Snipet rfce means
create a react function component
Snipet “rcc” means
Create a default react class component
Snipet ‘rfc’ means
Create a default react function component
Snipet ‘imrs’ means
Import react and useState hook
Snipet ‘est’ means
create an empty state object.
Snipet ‘sst’ means
create an empty setState method call.
Snipet ‘bnd’ means
create a method referencing binding
snipet ‘nfn’ means
create an arrow function
What is advantage of using errorboundaries
They catch errors during rendering, lifecycle methods and constructors in tree below them. They do not catch errors in UI
What are the main life-cycles for updating react
shouldComponentUpdate(nextProp , nextstate)
How do you include dependencies in useEffect hook
You include an array of dependencies i.e useEffect(()=>{//effect code },[//dependencies]);
What happens when you have a useEffect with an empty array of dependencies?
It will only run the effect in useEffect once.
What are the rules of using hooks?
It must be used in top levels of function. i.e not in loops, conditions or inner functions.
Secondly, it hooks should be called from react function, or created hook not javascript function.
How can you optimise class based react component?
shouldComponentUpdate(nextProps , nextSTate) can be monitored to see if there are changes after render() by comparing the nextProps with current or this.props. This only works provided you create a copy of state of the state array , otherwise you will be comparing to current pointer.
How can you optimise functional based react component.
use react.memo
How can you optimise functional based react component.
use react.memo
Wrap react.memo around component code to be used.
default export React.memo(function)
What is the benefit of using higher order component.
It can be used to handle cross-cutting concerns. It can be used as a abstraction that allows us to define reused logic in a single place and share it across many components. HOC adds an wrapping class which adds additional functionality. It takes a function and returns a new component.
What is HOC
It is a design pattern, higher-order component (HOC) is an advanced technique in React for reusing component logic.
Why must you not modify the original components prototype.
modifying the original component or mutating code inside HOC , can result in clashes. the consumer must know how they are implemented in order to avoid conflicts with other HOCs. Therefore use compositions instead. ( wrapping the input component in a container )component:
What is the purpose of proptypes in react?
proptypes provide type checking ensuring the right value is being assigned.
How may one access unknown props in higher order components?
Using the withnameofclass you can access jsx with wrappedcomponent and then use destructuring to extract the individual props.
What are refs in react?
Ref is an technique used to modify props in situations where parent needs to interact with child components. ref can be created in the constructor using React.createRef() or by using callback refs { } (i.e ref pass a function with its containing component as an argument) . These work only in class components. For functional you use hook useRef and reference useRef()
What is context?
It is a way of handling prop chain problems by a way to pass data through the component tree without having to pass props down manually at every level.
What is context API?
It is a way of handling prop chain problems by providing a way to pass data through the component tree without having to pass props down manually at every level.
What is signature of useState hook?
Array [current state , setStatefunction] = useState( initvalue)
Where should you use setState function?
Use it in callback function used in JSX reference. Value to trigger
What is as a prop , and how is it used?
While you are able to pass down information from parent to child via props, to pass information from child to parent you need to create a callback prop in form of a function with the named reference element as a property in the child element.
What is axios?
It is a promised based HTTP client used for dealing XMLHttpRequests and Node interface for both on Node and web browser through its API. It is useful tool for interfacing web with REST API .
How do you use axios?
Use axios GET request through promise axios.get( “URL”).then(function(response){
// Handle success
Console.log(response)
}).catch( function (error)){
// Manage failure
Console.log(response)
}
)
When should you use componentDidUpdate?
Use it when there is side effect in your web app , such as an update to component or props change which isn’t called for initial render. But only for Dom update.
What is suggested to address performance issues in componentDidUpdate?
At risk of looping update and rendering a condition is added to check change of state between prevState and this.state.
True or False: Props are readonly
True, a component should never modify its own props.
How do you render a React Element
You first must pass DOM element to ReactDOM.createRoot()
then you pass the react element to root.render()
why is a DIV in REACT regarded as a root DOM?
DIV is a root DOM node because everything inside it will be managed by React DOM.
What is react fibre?
react uses react fiber to reconcile the fiber tree or DOM tree. A fiber is a JavaScript object, a unit of work. It represents a node of the DOM tree, or a React element, and contains data about a component. The react core uses a reconciler (algorithm) to identify which elements are to be rendered after certain changes are made by the developer, it does this by comparing two DOMS and diff’ing them. React fiber is a new reconciler with backward compatibility.
What is the purpose of imrd snippet?
Importing reactDOM
What is the purpose of the imbr snippet
Importing browser router
What I the purpose of a browser router?
Everything to be routed should be held there. It has property to render content according to a defined path or route a component to a defined path.
