DEV Community: Shubham Sananse

10 React Practices To Make Your Code Better.

Shubham Sananse — Thu, 29 Apr 2021 07:08:16 +0000

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 verbose
class 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 maintain
function 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}

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 own
function 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 component
function Input(props) {
  return <input value={props.value} onChange={props.onChange} />
}

// 👍 Destructure and use the values directly
function 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 logs
function 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 paths
import {Input} from '../../../components/common/input'

// 👍 Absolute ones don't change
import {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.

useRef( ) : DOM and beyond...

Shubham Sananse — Wed, 28 Apr 2021 05:46:49 +0000

This blog assumes that you know the React fundamentals and useState hook.

Read my article on what is a state in an App? and useState hook (there's a TL;DR section, if you want to have a quick look 😉), you would need some of that state-related concept in this blog.

What is `useRef`?

Ref is just a { current: initialValue } object. It's nothing special. Both useRef(initivalValue) and createRef() give you that. - Dan Abramov

function useRef(initialValue) {
  // useRef works more like this
  return React.useState({
    current: initialValue
  })[0]
}

You just created your own useRef. 🤯🤯🤯

Why do we need `useRef`?

useRef actually serves two purposes,

Provides a reference to the DOM elements
Returns mutable value which persists across renders

But, what is this mutable and persistent value?

Persistent value is the kind of value that stays persistent between renders, that's what useState returns, a persistent value (state) and updater API (setState) to update that state which causes a re-render for that component. for an application to update its View(UI) you need that setState API.

But what if you want to have a value that stays persistent and does not cause a re-render of a Component.🤔

This is such a fundamental need that react provides a built-in API for it, That's what useRef is for.

useRef

// you can set any type of data as initialValue same as useState()
const objectWithCurrentProperty = React.useRef(initialValue)

const refOne = React.useRef() // returns {current : undefined}
const refTwo = React.useRef(1) // returns {current : 1}
const refThree = React.useRef([]) //returns {current : []}

useRef takes the initial value as an argument for the returned value.
These return values would be persisted and you can also mutate them according to your need.

Accessing the DOM with useRef

There are some libraries (e.g. Three.js or Anime.js) that need access to the dom.
when we write jsx it gets converted into React.createElement. a <div>Hello World</div> which we write as jsx gets converted into React.createElement("div", null, "Hello World") so you don't have any direct access to the DOM nodes from your returned jsx.

So to get access to the DOM, you need to ask React to give you access to a particular DOM node when it renders your component. The way this happens is through a special prop called ref.

function UploadButton({ handleUpload }) {
  const inputRef = React.useRef();

  const handleClick = () => inputRef.current.click();

  return (
    <>
      <input type="file" hidden ref={inputRef} onInput={handleUpload} />
      <button onClick={handleClick}>Upload</button>
    </>
  );
}

In this example, we are passing the ref prop inputRef to the hidden file input, and when we click on a button that uses inputRef.current to get access to that DOM element of that input and on that element we are calling click event.

some other cases would be like getting a value from an input, changing focus, or selecting text.

react-hook-form is a form library that encourages uncontrolled way of handling forms and ref prop to handle forms in react component, give it a try it's awesome.

Mutable Data Storage

Before we try to understand what this is and why do we need this? If you can, I would suggest you create a stopwatch component with stop and resume functionality.

.
.
.

Spoilers ahead....

.
.
.

// Here is a simple StopWatch component which updates time every 1 second
function StopWatch() {
  const [time, setTime] = useState(0);

  useEffect(() => {
      const interval = setInterval(() => {
        setTime((s) => s + 1);
      }, 1000);

      // clearInterval before unmounting component 
      return () => clearInterval(interval);
  }, []);

  return (<div>{time}</div>);
}

But now we need a button which will make the ticking of time stop and resume, for that we would add ticking state and update our useEffect.

function StopWatch() {
  const [time, setTime] = useState(0);
  const [ticking, setTicking] = useState(false);

  useEffect(() => {
    if (ticking) {
      const interval = setInterval(() => {
        setTime((ms) => ms + 1)
      }, 1000);
      return () => clearInterval(interval);
    } else {
      // 🤔 but we don't have access "interval" here
      clearInterval(interval)
    }
  }, [ticking]);

  return (
    <div>
      <div>{time}</div>
      <button onClick={() => setTicking(c => !c)}>{ticking ? 'Pause' : 'Resume'}</button>
    </div>
  )
}

So where do we put our interval now? if you put this outside useEffect on every render all local variables would reset and it would become undefined again

function StopWatch() {
 ...
// I 👇 would keep becoming undefined on every re-render 😢
let interval;

useEffect ...
}

So now we want something that stays persistent across renders and doesn't cause re-renders, and you guessed it right, we need useRef here.

function StopWatch() {
  const [time, setTime] = useState(0)
  const [ticking, setTicking] = useState(false)
  // mutable and persistant 
  const interval = useRef()

  useEffect(() => {
    if (ticking) {
      // `interval` would not reset when component re-renders
      interval.current = setInterval(() => {
        setTime((ms) => ms + 1)
      }, 1000)
      return () => clearInterval(interval.current)
    } else {
      // and now you have access to the interval
      interval.current && clearInterval(interval.current)
    }
  }, [ticking])

  return (
    <div className="App">
      <h1>{time}</h1>
      <button onClick={() => setTicking(c => !c)}>
        {time === 0 ? 'Start' : ticking ? 'Pause' : 'Resume'}
      </button>
    </div>
  )
}

Where to go from here? from now you can go and read more about forwarding refs and useImperativeHandle. Thanks for reading.

useState() like a Pro ✨

Shubham Sananse — Sun, 07 Feb 2021 08:48:33 +0000

This blog post covers all you need to know about the concept of a state and react useState hook from basics to advanced patterns. This blog assumes that you know about react fundamentals like Component, props, and jsx.

counter is the hello world of state management.

What is a state and why do we need state management in React? ⚛️

function Counter() {
  // State: a counter value
  const [counter, setCounter] = useState(0)

  // Action: code that causes an update to the state when something happens
  const increment = () => {
    setCounter(counter + 1)
  }

  // View: the UI definition
  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

as you can see in this example there three main parts to Counter component

State is the truth that drives our application
View is UI based on the state
Action is an event that occurs in the application and changes the state

React uses the stateful values (which is generated by hook APIs like useState, useReducer) to know when to update the UI (View) part of an application. Whenever this state value changes React will update the component so that the state of the UI is the same as the state of the Component.

useState Hook 🎣

useState is a function that accepts one argument as an initial value of any type for the state, and returns 2 elements in an array, first is the state value and the second is the updater function that we use to update the state value. This returned array is usually destructured so we can name the variables whatever we want but it is good practice and a common convention to prefix the set in front of the updater function.

// you can pass any data-type
setState() // if you don't pass anything than value will be updated with undefined 
setState('Thanks') // String
setState(4) // Number
setState(['reading']) // array 
setState({ share : 💗 }) // object
setState(null) // null

In our Counter component 0 is the initial value for the state, and using destructuring we are naming our 2 variables counter and setCounter. setCounter is used to update the counter value by 1 every time the button is clicked.

function Counter() {
  const [counter, setCounter] = useState(0)

  const increment = () => {
    setCounter(counter + 1)
  }

  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

Lazy initialization of state 🦥

Every time React re-renders the component, useState(initialState) is executed. if the initial state is some expensive function computation, e.g reading data from localStorage, mapping over some large amount of data, the instance with multiple methods ( e.g DraftJs or ThreeJs instance), then the component might face some performance issues.

// format : useState(() => initalState) 

const [token, setToken] = useState(() => window.localStorage.getItem('token') || '')

we can use the lazy initalization to avoid the performance bottleneck for this all you need to do is put your initial state in function and that's it.

Update the state with callback 🤙

 const [counter, setCounter] = useState(0);

 const increment = () => {
    setCounter(counter + 1);
    setTimeout(() => {
      setCounter(counter + 1);
    }, 1000);
  };

we have changed the increment function of the previous example, now we have added asynchronous behavior in our function what do you think the output will be?

Take a pause and think ,

Spoilers Ahead

You would see that after clicking the button once, even though we have 2 setCounter calls, we still get a new count updated with 1 only.

So what is actually happening? 🤔

The problem is that the second call to the setCounter is getting the same counter value as the first one. here in the example, both the setCounter got the value of counter as 0 so they updated it to 1.

But why 2nd the updater is getting the value of 0? 😕

For this, you need to understand how re-rendering actually works in React, We will not into the depths of this but in short re-rendering means if your state changes your whole component is replaced with the new one, In this example whole Counter is called again and then it gets the new value. here we are using multiple consecutive updates and due to closure setCounter has access to the counter variable one we got from array destructuring which has a value of 0.

In the example we have the initial value as 0 when the button is clicked we update the value from 0 -> 1 but to get that updated state(1) react needs to re-render the component but here we are calling the setCounter again to update counter with +1 and it gets counter as 0 so after one second when it updates the value 1.

For most async activities useEffect would be a better choice. and for more complex states useReducer.

Solution 🔥

When the new state is dependent on the previous state you can update the state with a callback.

const increment = () => {
    setCounter(counter + 1);
    setTimeout(() => {
      // callback inside a updater function
      setCounter(counter => counter + 1);
    }, 1000);
  };

If you would change the increment function with this new one you would have a reference to the internal state and not the closure value of state.

Use-cases 💼

// toggle a boolean
const [toggled, setToggled] = useState(false);
setToggled(toggled => !toggled);

// Update an object 
const [size, setSize] = useState({ height : 500, width : 800})
setSize(currentSize => ({...currentSize , height : 700}))

// Update items in array
const [items, setItems] = useState([]);
setItems(items => [...items, 'push']);