To run this project
- Clone the repo from
git clone https://github.com/Orinameh/deeltask.git
- Run
yarn(npm) install
- Then run
yarn start
to run the project
A component rerenders when there is a change in the state or props of its Parent component but a PureComponent will not rerender if a its parent component does. PureComponent does this by perfoming a shallow comparism on state change. With this, a PureComponent is said to be performant than a Component.
Ideally, shouldComponentUpdate
references the nextContext
of a component when there is rerendering.Since shouldComponentUpdate
bypasses the rerendering, whenever the states or props of component are not correctly changed, shouldComponentUpdate
will return false. This will make the state and props of the descendants component not to get update. As a result, their might be latency in the data which might cause problems.
- By passing a callback function as a prop from the parent to the child component.
- Using a state management tool like redux.
- Context can also be used to achieve this.
- Memoizing components with
React.memo
, expensive functions withuseCallback
hook and expensive computation withuseMemo
- Using
shouldComponentUpdate
to do shallow comparism of state in class components.
A fragment is a react element that is used for grouping several child components or elements in react without introducing a DOM elements. It's represented as <React.Fragment></React.Fragment>
or <></>
for short. An example where it might break an app is when you try to apply styling to it or when it was not properly closed.
A Higher Order Component(HOC)
is a function that takes another component as an argument and return a new component. Examples include:
- The
connect
function in redux is a perfect example ofHOCs
. - Another example is the Material-UI
withStyles
. - Finally,
StyledComponents
withTheme
is also an example.
In a promise, there is a catch exception that the error propagates to if the promise is rejected. E.g promiseFunction().then().catch(err)
. In a traditional callback, the error is passed as an argument alongside the result in the callback. This helps to handle the error before the result. In async...await, errors are handled similar to the promises(async...await is a promise) but with a different syntax. e.g try {const res = await somePromiseFunction()}catch(err){}
.
The setState
function has two arguments, 1. an object which contains the value to update and 2. the callback function which is asynchronous.
- Remove the
class
keyword and its extensions and replace with eitherfunction
orconst
to define the function. - Convert states to using
useState
hook. - Conver any lifecycle methods to using
useEffect
hook. TheuseEffect
hook can support all lifecycles of a react component. - Remove the
render
method and replace withreturn
to display thejsx elements
.
There are several ways to style react components. They include:
- Using custom css styles.
- Css modules which react supports by default. This helps to scope css classes which is important to avoid clashing of styles.
- Using Sass.
- A popular that was inspired by React is
css-in-js
frameworks. Examples includeStyledComponents
,EmotionCss
etc.
React exposes the dangerouslySetInnerHTML
for settiing HTML string coming from the server. This helps to prevent exposure to cross-site-scripting popular known as XSS
attack.
E.g <div dangerouslySetInnerHTML={{__html: html}} />