Imagine you have a component with a number state, and you pass the same state into another component for it you be used: ```tsx:Sample.tsx import { useState } from 'react' import { Snippets } from './snippets' export const Sample = () => { const [number, setNumber] = useState(0) return } ``` What should the SnippetsProps interface look like? Most people will type something like this: ```tsx:Snippets.tsx import { Dispatch, SetStateAction } from 'react' interface SnippetsProps { number: number setNumber: Dispatch> } export const Snippets = ({ number, setNumber }: SnippetsProps) => { return (

Clicked {number} times

) } ``` But it bothers me to have to import `Dispatch` and `SetStateAction` from react just to be able to define the interface. The type `Dispatch>` here is basically a function that accepts whatever type you declared your state is, in this case, its a number. So basically you can also do this here: ```tsx:Snippets.tsx interface SnippetsProps { number: number setNumber: (v: number) => void } export const Snippets = ({ number, setNumber }: SnippetsProps) => { return (

Clicked {number} times

) } ``` We just saved two imports just by declaring it as a function that accepts a number, and returns nothing. I know its just a small detail but I really believe it makes the code look cleaner. This is just one of my pet peeves, but at the end of the day, it really depends on the coding standard that you or your company follows. Hope you like one of my first blogs, will try to make more soon!

Hello I'm Dale Larroder, a Software Engineer / Full Stack Developer

Hello

I'm

Software Engineer

Fullstack Developer

Dale Larroder

Read more about me →

Recent Posts

My Spotify Top Songs