Coding-Tricks is written by Sandrine MANGUY | UX/UI Designer - Web Designer

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( […]

You are working on a WordPress custom theme and you need to apply a gradient onto the post_thumbnail. It is very easy to do using some CSS properties.

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.

You want to insert a beautiful quote with its caption and inserted cite and you discover that… WordPress only propose to insert a blockquote without any caption! Learn how to add a caption within a figure and how to obtain the expected formatted result in this article.