Articles tagged
React

Review how to insert inline CSS into JSX and then discover how to condition the React component rendering with inline CSS based on the component st

From the previous article you knew that you can render conditionally using if/else, && or ternary operator but did you know it was possible to automatically and conditionally render from given props? Let’s discover that together!

In React there are three different ways to control the rendering with JavaScript conditionals: the  if/else traditional one and two shortcuts. The Traditional if/else statements A JSX expression can be conditionally returned with an if statement outside the return statement. So, each statement contains a return(). render() {   if (condition) {     return( […]

When any component receives new state or new props, it re-renders itself and re-renders all its children even if the props haven’t changed!
Fortunately, React provides React.memo to optimize these unnecessary children functional components re-renders because of parents. Let’s discover when to use and how to implement React.memo in children functional components.

In order to optimize re-renders, in addition to React.memo, do not forget touse the hooks useCallback and useMemo in parent components to memoize function, objects and arrays props received by memoized children components.

When any component receives new state or new props, it re-renders itself and re-renders all its children even if the props haven’t changed!
Fortunately, React provides React.memo to optimize these unnecessary children functional components re-renders because of parents. Let’s discover when to use and how to implement React.memo in children functional components.

When any component receives new state or new props, it re-renders itself and re-renders all its children even if the props haven’t changed!
Fortunately, React provides two solutions to prevent these unnecessary children class components re-renders because of parents : the shouldComponentUpdate() lifecycle method and the PureComponent. Let’s discover when to use them and how to implement these two solutions in React Class Components.

Have you already added Event Listeners to the document or window objects with React.js? It is a little bit different from adding Event Listeners via the “attributes” onCLick() or onChange()… Have a look at the article below to discover how to do that!

The local logic is complex (containing many sub-values), or the next state depends on the previous state, or the performance of a components triggering deep updating needs to be optimize… Discover how to use the useReducer hook instead of useState in a counter…