React Flashcards
Benefits of design patterns
Components are:
- reusable
- styles are extensible
- easy API - props
- loose coupling - can be moved around easily because not tightly coupled to other components.
What is tight coupling?
How tightly coupled one component is to another. If tightly coupled then it cannot be moved around easily.
Atomic design
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
HOC
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.
Where can custom hooks be used?
In functional components
in other custom hooks
When is useEffect called?
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.
Why use Compound Component Pattern
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};
Ducks pattern
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.
Provider pattern
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.
Render prop pattern - with child too
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.
Compound Component Pattern, and two export approaches
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;
Explain component composition
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>
Error boundaries issue
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.
Code splitting
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>
Container component pattern
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.
What does lifting state mean?
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.
What should not be used as a key for a list item?
An index, rather use id
What is a powerful custom hooks library
react-use
Explain refs?
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.
Explain useRef
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
`
State hoisting
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.
useState
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.
How to make useEffect not execute on render.
Using useRef.
`
const isMounted = useRef(false)
useEffect(()=>{
if(isMounted.current){
//do something
}
isMounted.current = true;
},[])
`
Explain forwardRef
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>
));
