useState<\/code><\/h2>\n\n\n\n

A state is a private property of a component and is fully controlled by the component. When the value of a state changes, the component will be re-rendered.<\/p>\n\n\n\n

State value must be changed by the setState<\/code> function to trigger re-render. <\/p>\n\n\n\n

Generally, if setState<\/code> does not assign a new value, then re-render may not be triggered.<\/p>\n\n\n\n

JavaScript<\/span>

const<\/span> [<\/span>state<\/span>, <\/span>setState<\/span>] = <\/span>useState<\/span>(<\/span>initialState<\/span>);<\/span><\/span>\nsetState<\/span>(<\/span>prevState<\/span> <\/span>=><\/span> { <\/span>return<\/span> <\/span>getNewState<\/span>(<\/span>prevState<\/span>) })<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\n\n\n\n
useEffect<\/code><\/h2>\n\n\n\n
Allows you to perform side effects<\/em> in your components, such that the side effects do not interrupt rendering immediately. useEffect<\/code> can perform similar effects as the lifecycle methods. When the component is first rendered, the callback acts like componentDidMount<\/code>.<\/p>\n\n\n\n
What are the Side Effects<\/h3>\n\n\n\n
Side effects generally include those which affect rendering, such as fetching data, or directly assigning states before rendering. Anything that affects rendering should be put into a useEffect<\/code>.<\/p>\n\n\n\n
JavaScript<\/span>
useEffect<\/span>(() <\/span>=><\/span> { <\/span>fetchData<\/span>(); <\/span>return<\/span> () <\/span>=><\/span> <\/span>cleanup<\/span>(); }, [...<\/span>deps<\/span>]}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Dependencies<\/h3>\n\n\n\n
The effect function is triggered after every render unless dependencies<\/code> is provided in the list. dependencies<\/code> should include every variable that is used in the effect function so that the function is updated on time. Providing an empty list would make the effect only run once. This can replace componentDidUpdate<\/code>.<\/p>\n\n\n\n
Clean up<\/h3>\n\n\n\n
If the side effect needs things to be cleaned up (e.g., clear a timer), then you need to return a function for that. This acts the same as componentWillUnmount<\/code>.<\/p>\n\n\n\n
JavaScript<\/span>
useEffect<\/span>(() <\/span>=><\/span> {<\/span>const<\/span> <\/span>timer<\/span> = <\/span>setTimeout<\/span>(...); <\/span>return<\/span> () <\/span>=><\/span> <\/span>clearTimer<\/span>(<\/span>timer<\/span>) }<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\n\n\n\n
useRef<\/code><\/h2>\n\n\n\n
Create a reference for a DOM element. Performs better than document.querySelector<\/code>.<\/p>\n\n\n\n
JavaScript<\/span>
export<\/span> <\/span>default<\/span> <\/span>App<\/span> = () <\/span>=><\/span> {<\/span><\/span>\n    <\/span>const<\/span> <\/span>headingRef<\/span> = <\/span>useRef<\/span>()   <\/span>\/\/ It does not re-create a new instance when the element re-render.<\/span><\/span>\n    <\/span>headingRef<\/span>.<<\/span>strong<\/span>><\/span>current<\/span><\/<\/span>strong<\/span>>.<\/span>innerText<\/span> = <\/span>"HEADING"<\/span><\/span>\n<\/span>\n    <\/span>return<\/span> <\/span><<\/span>h1<\/span> <\/span>ref<\/span>=<\/span>{<\/span>headingRef<\/span>}<\/span>><\/span>Heading<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
How to change the “state” without re-rendering?<\/h3>\n\n\n\n
A useful trick to keep and update a variable without re-rendering is to store the value inside ref.current<\/code>. <\/p>\n\n\n\n
\n\n\n\n
useContext<\/code><\/h2>\n\n\n\n
What is Context<\/h3>\n\n\n\n
A context is like a global store for variables. Context provides a way to pass data through the component tree without having to pass props<\/code> down manually at every level.<\/p>\n\n\n\n
JavaScript<\/span>
\/\/ stores\/MyContext.js<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>MyContext<\/span> = <\/span>React<\/span>.<\/span>createContext<\/span>({...<\/span>initialValues<\/span>}) <\/span><\/span>\n\/\/ This is not an appropriate place to assign values, but a good place to define types.<\/span><\/span>\n<\/span>\n\/\/ App.js<\/span><\/span>\nimport<\/span> ...<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>App<\/span> = () => {<\/span><\/span>\n   <\/span>const<\/span> [<\/span>initialValues<\/span>, <\/span>setValues<\/span>] = <\/span>useState<\/span>(...)<\/span><\/span>\n   <\/span>return<\/span><\/span>\n       <<\/span>MyContext<\/span>.<\/span>Provider<\/span> <\/span><\/span>\n           <\/span>value<\/span>={{<\/span><\/span>\n                   ...<\/span>initialValues<\/span>,<\/span><\/span>\n                   <\/span>setValues<\/span>,<\/span><\/span>\n           }}<\/span><\/span>\n       ><\/span><\/span>\n         <<\/span>Content<\/span> \/><\/span><\/span>\n       <\/<\/span>MyContext<\/span>.<\/span>Provider<\/span>><\/span><\/span>\n}<\/span><\/span>\n<\/span>\n\/\/ Content.js<\/span><\/span>\nimport<\/span> ...<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>defualt<\/span> <\/span>Content<\/span> = () => {<\/span><\/span>\n    <\/span>const<\/span> <\/span>ctx<\/span> = <\/span>useContext<\/span>(<\/span>MyContext<\/span>)<\/span><\/span>\n    <\/span>return<\/span> <<\/span>h1<\/span>>{<\/span>ctx<\/span>.<\/span>value<\/span>}<\/<\/span>h1<\/span>><\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\n\n\n\n
useReducer<\/code><\/h2>\n\n\n\n
Why use reducer<\/h3>\n\n\n\n
useReducer<\/code> is usually preferable to useState<\/code> when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one (when the state can change in multiple ways). <\/p>\n\n\n\n
JavaScript<\/span>
const<\/span> [<\/span>state<\/span>, <\/span>dispatch<\/span>] = <\/span>useReducer<\/span>(<\/span>reducer<\/span>, <\/span>initialArg<\/span>, <\/span>init<\/span>);<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>reducer<\/span>(<\/span>state<\/span>, <\/span>action<\/span>) {<\/span><\/span>\n  <\/span>switch<\/span> (<\/span>action<\/span>.<\/span>type<\/span>) {<\/span><\/span>\n    <\/span>case<\/span> <\/span>'increment'<\/span>:<\/span><\/span>\n      <\/span>return<\/span> {<\/span>count:<\/span> <\/span>state<\/span>.<\/span>count<\/span> + <\/span>action<\/span>.<\/span>payload<\/span>};<\/span><\/span>\n    <\/span>case<\/span> <\/span>'decrement'<\/span>:<\/span><\/span>\n      <\/span>return<\/span> {<\/span>count:<\/span> <\/span>state<\/span>.<\/span>count<\/span> - <\/span>action<\/span>.<\/span>payload<\/span>};<\/span><\/span>\n    <\/span>default<\/span>:<\/span><\/span>\n      <\/span>throw<\/span> <\/span>new<\/span> <\/span>Error<\/span>();<\/span><\/span>\n  }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Integrate with Context<\/code><\/h3>\n\n\n\n
JavaScript<\/span>
const<\/span> <\/span>MyContext<\/span> = <\/span>React<\/span>.<\/span>createContext<\/span>({<\/span><\/span>\n  <\/span>state:<\/span> <\/span>initialState<\/span><\/span>\n,<\/span><\/span>\n  <\/span>dispatch<\/span>:<\/span> () <\/span>=><\/span> <\/span>void<\/span>,<\/span><\/span>\n})<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>reducer<\/span> = (<\/span>state<\/span>, <\/span>action<\/span>) <\/span>=><\/span> {<\/span><\/span>\nswitch<\/span> (<\/span>action<\/span>.<\/span>type<\/span>) {<\/span><\/span>\n    <\/span>case<\/span> <\/span>'ACTION_1'<\/span>:<\/span><\/span>\n      <\/span>return<\/span> <\/span>getNewState<\/span>(<\/span>state<\/span>, <\/span>action<\/span>.<\/span>payload<\/span>)<\/span><\/span>\n    ...<\/span><\/span>\n    <\/span>default<\/span>:<\/span><\/span>\n      <\/span>throw<\/span> <\/span>new<\/span> <\/span>Error<\/span>(<\/span>`Unhandled action type: <\/span>${<\/span>action<\/span>.<\/span>type<\/span>}<\/span>`<\/span>)<\/span><\/span>\n  }<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>const<\/span> <\/span>MyContextProvider<\/span> = ({ <\/span>children<\/span> }) <\/span>=><\/span> {<\/span><\/span>\n  <\/span>const<\/span> [<\/span>state<\/span>, <\/span>dispatch<\/span>] = <\/span>React<\/span>.<\/span>useReducer<\/span>(<\/span>reducer<\/span>, <\/span>initialState<\/span>)<\/span><\/span>\n<\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>MyContext.Provider<\/span> <\/span>value<\/span>=<\/span>{<\/span>{ <\/span>state<\/span>, <\/span>dispatch<\/span> }<\/span>}<\/span>><\/span><\/span>\n      <\/span>{<\/span>children<\/span>}<\/span><\/span>\n    <\/span><\/<\/span>MyContext.Provider<\/span>><\/span><\/span>\n  )<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n\/\/ App.js > App()<\/span><\/span>\nreturn<\/span> <\/span><<\/span>MyContextProvider<\/span>><<\/span>App<\/span>\/><\/<\/span>MyContextProvider<\/span>><\/span><\/span>\n\/\/ Content.js > Content()<\/span><\/span>\nconst<\/span> <\/span>ctx<\/span> = <\/span>useContext<\/span>(<\/span>MyContext<\/span>)<\/span><\/span>\nctx<\/span>.<\/span>dispatch<\/span>({ <\/span>type<\/span>, <\/span>payload<\/span> })<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\n\n\n\n
useMemo<\/code><\/h2>\n\n\n\n
Returns a memorized value<\/strong>. Pass a \u201ccreate\u201d function and an array of dependencies. useMemo<\/code> will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.<\/p>\n\n\n\n
JavaScript<\/span>
const<\/span> <\/span>memoizedValue<\/span> = <\/span>useMemo<\/span>(() <\/span>=><\/span> <\/span>computeExpensiveValue<\/span>(<\/span>a<\/span>, <\/span>b<\/span>), [<\/span>a<\/span>, <\/span>b<\/span>]);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\n\n\n\n
useCallback<\/code><\/h2>\n\n\n\n
Return a memoized version of the callback function <\/strong>that only changes if one of the dependencies has changed.<\/p>\n\n\n\n
JavaScript<\/span>
const<\/span> <\/span>fn<\/span> = <\/span>useCallback<\/span>(<\/span>cb<\/span>, [...<\/span>deps<\/span>])<\/span><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
A brief cheatsheet for commonly-used hooks in React.<\/p>\n","protected":false},"author":1,"featured_media":935,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","WB4WB4WP_MODE":"","WB4WP_PAGE_SCRIPTS":"","WB4WP_PAGE_STYLES":"","WB4WP_PAGE_FONTS":"","WB4WP_PAGE_HEADER":"","WB4WP_PAGE_FOOTER":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28,26],"tags":[17,30,29,52],"class_list":["post-408","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-tech","tag-computer-science","tag-frontend","tag-react","tag-web"],"yoast_head":"\n