Been using react for past two years now, I have learnt few things which are surprising, and also very useful. Below are some tips that might be helpful to understand few concepts in react.
- Understanding this.setState
As shown above, this.setState has few important features in it. It has access to its previous state, props, has an optional callback function, and re-renders the component after the state is updated.
Use these whenever required, also remember there is an optional callback function which will have an updated this.state value when it’s called, this function will be called after the component is re-rendered.
2. Use Higher-Order Components
Higher-Order Components are the functions which take component as an argument and returns a new enhanced component. Use HOC as a boilerplate component, This is a very useful feature when we have state management in the application.
HOC demo example: GitHub
The code snippet above is a HOC which will render the input component + header component.
Using HOC is as simple as making a function call or using annotation method.
3. Use functional components
Try to use a lot of functional components, this has the following advantages. (Divide and conquer method)
- Small useful components with Less code
- It is very easy to understand since each component has its own part to play
- it is easier to unit test them
4. Define propTypes, Use the prop-types library
npm i prop-types
Use propType and defaultProps for your component.
This will help other developers to understand what kind of props are required, better readability, and explains if its a mandatory props or not with isRequired property.
5. Binding functions to the component
In ES6, React does not auto-bind functions defined within the component. That said, all the functions mentioned within a component will be undefined when you try to use them.
There are several ways to bind the method to this scope
- Can bind using arrow function in either render or while defining a function
- Can bind using this.functionName.bind(this) in render.
- Can bind using this.functionName.bind(this) in the constructor
Note: This is the best way of binding a function, since its done once while initiating the component properties in constructor
6. Use component state variables instead of global/component variable
Do not define any variables as let, var or const unless it is required, instead use the state to hold your local variable, this will allow the local variable to participate in the react life cycle and that makes the component more reactive.
7. Understand react lifecycle methods
8. Use React Developer Tool
Chrome has an awesome extension called React Developer Tools, this is very helpful since it helps you see values of props and understand react lifecycle whenever there are any changes in props.
9. Use webpack bundle analyzer
webpack bundle analyzer will create an interactive treemap visualization of the contents of all your bundles.
This module will help you:
- Realize what’s really inside your bundle
- Find out what modules make up the most of its size
- Find modules that got there by mistake and Optimize it!
npm i webpack-bundle-analyzer
Learn more about me here,