React

Question 1

Benefits of design patterns

Answer 1

Components are:
- reusable
- styles are extensible
- easy API - props
- loose coupling - can be moved around easily because not tightly coupled to other components.

Question 2

What is tight coupling?

Answer 2

How tightly coupled one component is to another. If tightly coupled then it cannot be moved around easily.

Question 3

Atomic design

Answer 3

1) Atoms are the smallest building blocks eg. buttons, input fields
2) Atoms come together to form molecules - for example an input field and button together.
3) Molecules and atoms can be combined to form organisms - a container component
4) Organisms are used on the page

Question 4

HOC

Answer 4

It’s a function that takes a component, adds some additional functionality to it (lifecycle methods), or props to it, and returns a new enhanced component with these new props. Use withBlaBlaBla as convention. Similar to the purpose of custom hooks, but an outdated way of doing it.

Question 5

Where can custom hooks be used?

Answer 5

In functional components
in other custom hooks

Question 6

When is useEffect called?

Answer 6

After the component has been printed to the screen (rendered) and after the dependency array is initially set and after updates to values in the dependency array.

Question 7

Why use Compound Component Pattern

Answer 7

Avoid prop-drilling / props overload: where props are sent to a component, just to send it to a child.

Example:
`

<table>
<Table.Row>
<Table.Column>
something
</Table.Column>
<Table.Column>
something two
</Table.Column>
</Table.Row>
</table>

`

In order to have this export syntax do the following as example

index.js

import {Column,Row,Table} from ‘./Table’;

Table.Row = Row;
Table.Column = Column;

export {Table};

Question 8

Ducks pattern

Answer 8

This is specifically intended to be used with Redux, BUT, it can also be slightly tweaked for use with context.

All the action creators, and async actions (redux), the provider (context), the reducer (redux and context), the styles, the automated test should be housed in the component’s directory and only what is required outside of it, should be exposed via the index file.

Question 9

Provider pattern

Answer 9

Create a context provider , which is a component that wraps other components, that are meant to consume the context (with useContext - createContext() result)

Best to use useReducer in the context provider, even though it isn’t necessary.

Question 10

Render prop pattern - with child too

Answer 10

Similar to Vue slots, way of sending data back up is also possible.

Vue slots can be more than one though, with React this is not possible.

Question 11

Compound Component Pattern, and two export approaches

Answer 11

Uses composition. Prevents props drilling or overload.

Export each component (the container and it’s children components) via the index file, OR

if you’d like the Table, Table.Row, Table.Col sort of approach, then just update the container component function (in JS functions are also objects):

import {Table,Row,Col} from ‘./Table’

Table.Row = Row;
Table.Col=Col;

export const Table;

Question 12

Explain component composition

Answer 12

Use slots (in Vue) and children (in React) to create a wrapper component that can take children for customisation.

Example where Alert is the shell component:

<Alert>some custom content</Alert>

Question 13

Error boundaries issue

Answer 13

React doesn’t have ErrorBoundary component built into it, but you can go to the react site to copy and paste an example component they give you. It’s class based. Better to use react-error-boundary package which abstracts this for you.

Basically handle errors thrown in components wrapped in the ErrorBoundary, by rendering an error or imperatively handling it as well.

Question 14

Code splitting

Answer 14

Code splitting is where you only load imports (modules) into your application when they are needed, and not before-hand. This greatly improves the initial render.

This includes component, functions etc

The imports are called dynamic imports

example

onClick = {()=>{
import(‘./sum.js’).then(module=>{
module.sum(2+2); //for named ;
module.default() for default
})
}}

for components:

const Home = React.lazy(()=>import(‘./Home’)) // default export

//named exports

const About = React.lazy(()=>import(‘./About’).then(module)=>{
return {
default:module.About
}
})

Any lazily-loaded components need to be wrapped inside <Suspense fallback={<LoadingDisplay></LoadingDisplay>}></Suspense>

Question 15

Container component pattern

Answer 15

Handle all state in the container component, as well as do Ajax requests, use hooks like context hooks, and handle all logic. Pass data down to children and hoist it back up via callbacks if necessary.

Question 16

What does lifting state mean?

Answer 16

Lifting state from one component to the least common parent (like in container component pattern) is required when siblings share state. Colocation is the inverse.

Question 17

What should not be used as a key for a list item?

Answer 17

An index, rather use id

Question 18

What is a powerful custom hooks library

Answer 18

react-use

Question 19

Explain refs?

Answer 19

Refs are references to DOM nodes/components - for custom components use forwardRefs()

All HTML elements have a ‘ref’ prop which is a callback that returns the reference to it.

Two ways of storing the ref:

`
const textRef = useRef();

return <input
ref={textRef}
type={‘text’}
/>

OR

<input
style={{ backgroundColor: ‘green’, height: ‘50px’ }}
ref={ref=>textRef.current = ref}
type={‘text’}
/>

The ref can then be used to manipulate the DOM element, for example textRef.current.focus() or textRef.current.blur();
`

For custom components you can use useImperativeHandle with the ref.

Question 20

Explain useRef

Answer 20

This is a hook built into React

It doesn’t cause a re-render when it’s data is updated

The data stored within it is kept during re-render

Best not to mutate it, if current holds an object as a value.

Reassign a value to it and access it via variableName.current

`
const someVar = useRef(initial value)

someVar.current=’new value’

// access it

someVar.current

`

Question 21

State hoisting

Answer 21

Hoist the state of a component, via a callback that you send in as a prop, which is invoked in the child, with it’s state.

Question 22

useState

Answer 22

The state updater returned by useState can be envoked with a new value, or with a function that is envoked by react and returns the previous state. Return the new state that it should become.

Question 23

How to make useEffect not execute on render.

Answer 23

Using useRef.

`
const isMounted = useRef(false)

useEffect(()=>{

if(isMounted.current){
//do something
}

isMounted.current = true;

},[])

`

Question 24

Explain forwardRef

Answer 24

Use it to implement a ref prop on a custom component.

Send ref in to component

const someRef = useRef();

<MyComponent ref={someRef} />

const forwardRef((props,ref)=>(
<div ref={ref}></div>
));

Question 25

How to create uncontrolled components for inputs

Answer 25

Add a ref to an input, using useRef, and then access ref.current

Use defaultValue to set initial value

Example:

const myName = useRef(‘’)

<input ref={myName} defaultValue=’Whatever’/>

//now

myName.current.value now contains the name value

Question 26

useImperativeHandle

Answer 26

With this hook, you can manipulate a ref. Basically you can add methods or values onto a ref, by returning an object literal from the callback

useImperativeHandle(ref,()=>{
return {
one(){},
two:10,
}
},[])

A real-world example would be where you want to send down a singleref to a custom component, but you want to use it to focus on more than one element, ie, normally more than one ref would need to be sent down without useImperativeHandle

const ref = useRef();

ref.current.one()
ref.current.two()

<CustomComponent ref={ref}/>

export const CustomComponent = forwardRef((props,ref)=>{
const ref1 = useRef();
const ref2= useRef();

useImperativeHandle(ref,()=>{
return {
one(){ref1.current.focus()},
two(){ref2.current.focus()}
}
},[])

return (
<>
<input></input>
<input></input>
</>
)

})

Question 27

useId

Answer 27

Creates a unique HTML id to use in your mark-up. Every time you refresh the screen, if the DOM is the same, react generates the same value for this hook. This makes server side rendering and client side hydration un-problematic.

const id = useId()

Question 28

useDeferredValue

Answer 28

This tells React to only update this value when React isn’t busy with other rendering/calculations etc. Tell React that this is low priority and doesn’t need to be updated instantaneously like useState() variables.

Question 29

useTransition

Answer 29

This hook tells React to deprioritize code blocks that do state updates.

Generally state updates are chunked together for re-rendering, in order to minimise the amount of re-rendering.

By using useTransition, we can tell React that some state updates, and therefore re-rendering should only be done when React is not too busy.

const [name,setName] = useState(‘’);
const [surname,setSurname] = useState(‘’);

const [isPending,startTransition] = useTransition();

startTransition(()=>{
setSurname(‘blablabla’);
})

Question 30

useLayoutEffect

Answer 30

Runs just before the component is printed to the screen, but after DOM has been calculated, with it’s measurements etc. Any manipulation pertaining to the DOM should be done in this hook and NOT useEffect

Question 31

useDebugValue

Answer 31

For debugging - logs to dev tools. Only works in custom hooks, not in components.

Question 32

useEffect cleanup

Answer 32

This is the function returned from the useEffect hook. It runs before the rest of the function body.

Important note is that the initial render also calls useEffect, but without first calling the cleanup function.

However, after the dependency array is set and updated, the cleanup function is called before the the rest of the function body.

It is also called when the component that uses the useEffect() is unmounted.

Question 33

When is useImperativeHandle called?

Answer 33

Just like useEffect

Once the component is printed to the screen, when the dependency array is set, and after that when the dependencies are updated.

Question 34

What is useEffect used for?

Answer 34

In order to perform side effects. If a side effect within the hook needs to be cleared/stopped, then return a function from it with this code.

This will execute when the component is unmounted, and also, just before the useEffect function body is executed again, unless it’s the initial render.

Without dependency array, it executes with every render/re-render

With empty array, it’s similar to componentDidMount(); It renders just after initial render, and when the dependency (empty) is set.

Question 35

What is lazy loading

Answer 35

Only loading modules when they are required, like code splitting where React.lazy loads components only when required. React.Suspense is required for rendering though.

Question 36

Suspense

Answer 36

It allows you to:
- Wait for ajax request to complete before rendering component wrapped in suspense. Fallback allows display of loading component during request
- with lazily loaded components

Question 37

What are the rules around dependency arrays?

Answer 37

Never use an object OR array that is not memoized, or unmemoised function as an item in the list.

Reason being that arrays and objects are recreated with every render because even if the value is the same, it refers to a different item in the heap. useMemo counters this.

Question 38

How do you set up redux in react app

Answer 38

Redux for framework agnostic functionality

Redux-toolkit or react-redux for react bindings and hooks etc.

Question 39

Colocation

Answer 39

Things that work together, belong together. Container component pattern is example of this.