useCallback vs useMemo

Gagandeep Singh
useCallback and useMemo are two of the multiple hooks released with React V16. Hooks are javascript functions which help in isolating some functionality from the functional component (hooks cannot be used inside class based components). useCallback - As per the official documents, useCallback “Returns a memoized callback”. Here memoized means maintaining or saving a version of the function in the memory for the given array of one or more dependencies.

Using useState hook with the previous state

Gagandeep Singh
Let’s take a very basic use case of the useState() hook; updating the count variable on each click. The code look perfectly fine and will work as expected in almost every time. BUT the issue with this code is that setCount() doesn’t guarantee that the previous count that it’s going to use to either increment and decrement to get the next state will be the latest one. To make sure that we always use the latest previous state for calculating the new state, we need to pass a callback function in the setCount rather than directly doing computation inside it.

Container vs Presentational Components in ReactJS

Gagandeep Singh
Presentational/Functional/Stateless Components Functional components in ReactJS is a simpler way of creating components. Some of the key features of functional components are: It is best suitable for components which only consists of a render method They are also called stateless components since they don’t have an internal state and just make use of props to display the data It is not a class which extends React.Component It is just a function which accepts props and returns the rendered component You can define propTypes and defaultProps on the function let helloComponent = (props) => { return( {props.