Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 29, 2021 07:08 am GMT

10 React Practices To Make Your Code Better.

1. Functional Components > Class Components

Functional components have much simple syntax than class components and more readable.

As of now, you can't create error boundaries with class components but if you want but you can also use packages like react-error-boundary.

//  Class components are verboseclass Counter extends React.Component {  state = {    counter: 0,  }  constructor(props) {    super(props)    this.handleClick = this.handleClick.bind(this)  }  handleClick() {    this.setState({ counter: this.state.counter + 1 })  }  render() {    return (      <div>        <p>counter: {this.state.counter}</p>        <button onClick={this.handleClick}>Increment</button>      </div>    )  }}//  Functional components are easier to read and maintainfunction Counter() {  const [counter, setCounter] = useState(0)  handleClick = () => setCounter(counter + 1)  return (    <div>      <p>counter: {counter}</p>      <button onClick={handleClick}>Increment</button>    </div>  )}

2. Keep your styling consistent

Using prettier and Eslint will save you a lot of time. another thing that you can do is to fix how your components will differ from your methods or helper functions.


one thing that you can do is to use function declaration for your components and arrow functions with other methods which are used inside components. easy search and reads.

3. Don't use the default export

With named exports, you don't just get the editor to autocomplete but also consistent naming for your components and variables.
I personally don't like to use export function add(){} and would rather prefer export {add} cause in any file I can just go to the end and know which functions are exported rather than searching for export.

//   export default function Counter(){  return ...}// -----------------------//// function Counter(){  return ...}export {Counter}

With lazy-loaded components there is no escape, you need to export default them.

4. Early exit with return keyword

early exits makes your code look much cleaner than using ternary operators or if-else.

//   function Posts(){  const [posts, setPosts] = useState()  ///  return (!posts ? <CreatePost /> : <PostsList />)}// -----------------------//// function Counter(){  const [posts, setPosts] = useState()  ///  if(!posts) return <CreatePost />  return <PostsList />}

5. Avoid Nested Ternary Operators

//  Nested ternaries are hard to read isLoading ? (  <Loading />) : posts.length > 0 ? (  <PostsList />) : (  <CreatePost />)//  Place them inside a component on their ownfunction PostsPage({ isLoading, posts }) {  if (isLoading) {    return <Loading />  }  if (posts.length > 0) {    return <PostsList />  }  return <CreatePost />}

there's an Eslint rule for this named as no-nested-ternary

6. Destructure props

With all props destructured at the top, you always know which props this component is using and it also makes your code cleaner. there's no need to write props everywhere.

//  Don't repeat props everywhere in your componentfunction Input(props) {  return <input value={props.value} onChange={props.onChange} />}//  Destructure and use the values directlyfunction Component({ value, onChange }) {  const [state, setState] = useState('')  return <div>...</div>}

7. Don't create Components inside Component

This is a very common mistake beginners make. whenever a component re-renders everything inside the component is recreated so if you create a component inside another component every time the parent component re-renders the child component will unnecessary unmount and then remount.

// run this code and check console logsfunction Parent() {  const [count, setCount] = useState(0);//  Avoid doing this  function ChildComponent() {    useEffect(() => {      console.log("I am mounted");      return () => console.log("I am unmounted");    }, []);    return "I am child";  }  return (    <div>      Parent : {count}      <button onClick={() => setCount((c) => c + 1)}>add </button>      <br />      <ChildComponent />    </div>  );}

8. You might not need State Management Library

React provides state management API like useState and useReducer. You can also use context API for making a piece of state accessible to multiple nested components. consider using redux, recoil, or any other state management library only when your app grows complex.

9. Use Absolute Paths

With absolute paths, you will have to change less when you move files from one place to another, o it makes it easier to find out where everything is getting pulled from.
you can create a jsconfig.json file at the root of your folder and have an absolute path for each directory.

// jsconfig.json{  "compilerOptions": {    "baseUrl": "./src",    "paths": {      "@/components/*": ["components/*"],      "@/lib/*": ["lib/*"],      "@/styles/*": ["styles/*"],      "@/assets/*": ["assets/*"],      "@/utils/*": ["utils/*"]    }  }}

with jsconfig file in the root of your folder now you can import files like this

//  Don't use relative pathsimport {Input} from '../../../components/common/input'//  Absolute ones don't changeimport {Input} from '@/components/common/input'

10. Use Data Fetching Libraries

React applications do not come with an opinionated way of fetching or updating data from your components so developers end up building their own ways of fetching data.

With data fetching libraries like react-query, you can cache, fetch, invalidate and mutate server state easily with very minimal code.


Original Link: https://dev.to/shubham_sns/10-react-practices-to-make-your-code-better-5egj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To