1"use strict";(self.webpackChunkdev_links=self.webpackChunkdev_links||[]).push([[9411],{3905:(e,t,n)=>{n.d(t,{Zo:()=>l,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),p=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},l=function(e){var t=p(e.components);return r.createElement(c.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,s=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=p(n),m=a,f=u["".concat(c,".").concat(m)]||u[m]||d[m]||s;return n?r.createElement(f,o(o({ref:t},l),{},{components:n})):r.createElement(f,o({ref:t},l))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var s=n.length,o=new Array(s);o[0]=m;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i[u]="string"==typeof e?e:a,o[1]=i;for(var p=2;p<s;p++)o[p]=n[p];return r.createElement.apply(null,o)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},1772:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>u,frontMatter:()=>s,metadata:()=>i,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const s={},o=void 0,i={unversionedId:"ReactJS/Best Practices",id:"ReactJS/Best Practices",title:"Best Practices",description:"Best Practices",source:"@site/docs/ReactJS/Best Practices.md",sourceDirName:"ReactJS",slug:"/ReactJS/Best Practices",permalink:"/docs/ReactJS/Best Practices",draft:!1,editUrl:"https://github.com/luizrosalba/dev-links/tree/master/docs/ReactJS/Best Practices.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Animations",permalink:"/docs/ReactJS/Animation"},next:{title:"Component Libs",permalink:"/docs/ReactJS/Component Libs"}},c={},p=[{value:"Best Practices",id:"best-practices",level:2},{value:"useReducer for complex state",id:"usereducer-for-complex-state",level:2},{value:"Use shorthand for boolean props",id:"use-shorthand-for-boolean-props",level:2},{value:"Avoid curly braces for string props",id:"avoid-curly-braces-for-string-props",level:2},{value:"Erase non-html attributes when spreading propss",id:"erase-non-html-attributes-when-spreading-propss",level:2},{value:"Composition Pattern",id:"composition-pattern",level:2}],l={toc:p};
1function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},l,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"best-practices"},"Best Practices"),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://www-freecodecamp-org.cdn.ampproject.org/c/s/www.freecodecamp.org/news/best-practices-for-react/amp/"},"freeCodeCamp")),(0,a.kt)("h2",{id:"usereducer-for-complex-state"},"useReducer for complex state"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"title='useReducer for complex state'",title:"'useReducer",for:!0,complex:!0,"state'":!0},"Avoid :\n\nconst CustomersMap = () => {\n const [isDataLoading, setIsDataLoading] = useState(false)\n const [customersData, setCustomersData] = useState([])\n const [hasError, setHasError] = useState(false)\n const [isHovered, setIsHovered] = useState(false)\n const [hasMapLoaded, setHasMapLoaded] = useState(false)\n const [mapData, setMapData] = useState({})\n const [formData, setFormData] = useState({})\n const [isBtnDisabled, setIsBtnDisabled] = useState(false)\n\n ...\n\n return ( ... )\n}\n\nDo:\n\n// INITIAL STATE\nconst initialState = {\n isDataLoading: false,\n customerData: [],\n hasError: false,\n isHovered: false,\n hasMapLoaded: false,\n mapData: {},\n formdata: {},\n isBtnDisabled: false\n}\n\n// REDUCER\nconst reducer = (state, action) => {\n switch (action.type) {\n case 'POPULATE_CUSTOMER_DATA':\n return {\n ...state,\n customerData: action.payload\n }\n case 'LOAD_MAP':\n return {\n ...state,\n hasMapLoaded: true\n }\n ...\n ...\n ...\n default: {\n return state\n }\n }\n}\n\n// COMPONENT\nconst CustomersMap = () => {\n const [state, dispatch] = useReducer(reducer, initialState)\n\n ...\n\n return ( ... )\n}\n\n")),(0,a.kt)("h2",{id:"use-shorthand-for-boolean-props"},"Use shorthand for boolean props"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"title='Use shorthand for boolean props'",title:"'Use",shorthand:!0,for:!0,boolean:!0,"props'":!0},"Avoid: <RegistrationForm hasPadding={true} withError={true} />;\n\nDo: <RegistrationForm hasPadding withError />;\n")),(0,a.kt)("h2",{id:"avoid-curly-braces-for-string-props"},"Avoid curly braces for string props"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"title='Avoid curly braces for string props'",title:"'Avoid",curly:!0,braces:!0,for:!0,string:!0,"props'":!0},'Avoid: <Paragraph variant={"h5"} heading={"A new book"} />;\n\nDo: <Paragraph variant="h5" heading="A new book" />;\n')),(0,a.kt)("h2",{id:"erase-non-html-attributes-when-spreading-propss"},"Erase non-html attributes when spreading propss"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"title='Erase non-html attributes when spreading props'",title:"'Erase","non-html":!0,attributes:!0,when:!0,spreading:!0,"props'":!0},"// always extract all non-HTML attributes from the props first, to make sure that there are only valid HTML attributes in restProps that you're spreading onto a JSX element.\n\nDo:\n\n// Page Component\nconst IndexPage = () => {\n\n return (\n <>\n <MainTitle isBold hasPadding>\n Welcome to our new site!\n </MainTitle>\n ...\n </>\n )\n}\n\n// MainTitle Component\nconst MainTitle = ({ isBold, children, hasPadding, ...restProps }) => {\n\n return (\n <h1\n style={{\n fontWeight: isBold ? 600 : 400,\n padding: hasPadding ? 16 : 0\n }}\n {...restProps}\n >\n {children}\n </h1>\n )\n}\n\n")),(0,a.kt)("h2",{id:"composition-pattern"},"Composition Pattern"),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://medium.com/@flavtech/stop-passing-props-between-react-components-apply-composition-pattern-15b132bf0686"},"https://medium.com/@flavtech/stop-passing-props-between-react-components-apply-composition-pattern-15b132bf0686")))}u.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.