DEV Community

Top 10 React.js Tips and Tricks Everyone Should Know

Vishal Yadav on June 29, 2024

1. Embrace JSX for Cleaner Code 📝 JSX is a syntax extension for JavaScript that allows you to write HTML-like code directly within JavaS...
Collapse
 
manvendrask profile image
Manvendra Singh •

Use TypeScript so that you don't need to rely on PropTypes. Moreover, TS will give you type safe context ysage if you opt for it.

Collapse
 
enamul_haque profile image
Enamul Haque •

Good article

Collapse
 
vyan profile image
Vishal Yadav •

Thanks!

Collapse
 
kalynux profile image
kalynux •

Thanks

Collapse
 
almogzur profile image
almogzur •

Grate but EroorBoundaries is only for class components and you recomeded
React.FC

Collapse
 
vyan profile image
Vishal Yadav •

Nice

Collapse
 
motss profile image
Rong Sen Ng •

useReducer is over-complicating your implementation. Avoid using this whenever you can, unless you're a Redux fans.

Collapse
 
brense profile image
Rense Bakker •

You can make reducers as complicated or as simple as you want. It's much simpler to manage a state object with different properties, using a reducer, than with useState:

function simpleReducer(currentState, newState){
  return {...currentState, ...newState}
}

const initialState = {
  name: '',
  email: ''
}

function SomeComponent(){
  const [person, setPerson] = useReducer(simpleReducer, initialState)
  return <button onClick={() => setPerson({ name: 'hello' })}>click</button>
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
vyan profile image
Vishal Yadav •

Sure.

Collapse
 
sunilkhadka001 profile image
Sunil khadka •

It's more like 10 react js concepts every beginner should know.

Collapse
 
saroj8455 profile image
Saroj Padhan •

Great

Collapse
 
mayank_tamrkar profile image
Mayank Tamrkar •

can we make ErrorBoundary in functional component ??

Collapse
 
vyan profile image
Vishal Yadav •

I think the error boundaries can only be implemented using class components.