React Tip ๐Ÿ’ก You can use 'React.Children.toArray' to let React automatically assign a key to its children.

React

It's #ChakraUITips time ๐Ÿคฉ! If you're working with #nextjs and you'd like to utilize the next/image component, but still want to use @chakra_ui style props, you can use the "chakra" factory function to wrap NextImage and pass down the width, height, src and the other props!

React

๐Ÿ’ก React tip: You can save some lines of code by using "useContext" inside your theme context JS file.

React

React Tip ๐Ÿ’ก We can access previous values of state or props in a functional component in React using useRef and useEffect hook. #DEVCommunityIN #reactjs #React #webdev #javascript #frontenddev #100DaysOfCode

React

React Tip ๐Ÿ’ก We can compare previous and current values in a useEffect by writing a simple usePrevious hook. #React #reactjs #javascript #DEVCommunityIN #100DaysOfCode

React

@iorranmc I do separate hooks in the same file. QueryKeys are generated with a function, something like this:

React

useClickOutside: Handles the event of clicking outside of the wrapped component. #ReactJS https://t.co/6yqIQQXE9R

React

6๏ธโƒฃ JSX control statements A throwback solution that uses component syntax to write conditions. It ultimately transpiles code down to ternary statements It likely won't play nice with TypeScript so I'll stick with the other solutions (babel-plugin-jsx-control-statements) ๐Ÿงต๐Ÿ‘‡๐Ÿพ

React

3๏ธโƒฃ Inline ternary Allows for returning UI for both the `true` & `false` cases Depending on how much UI is rendered in the `true` case, it could be hard to figure out where the `false` case starts. But again Prettier formatting makes things better ๐Ÿงต๐Ÿ‘‡๐Ÿพ

React

4๏ธโƒฃ Component early return Instead of conditionally rendering a component, have the component itself decide whether or not to render This moves the conditional rendering to a single place when multiple components use this component ๐Ÿงต๐Ÿ‘‡๐Ÿพ

React

5๏ธโƒฃ Helper function When multiple variables are needed to calculate a condition or lots of UI is conditionally rendered, we can move it to a helper func to keep everything together (you can even make this inline by using an IIFE ๐Ÿคช๐Ÿคฏ) ๐Ÿงต๐Ÿ‘‡๐Ÿพ

React

The tweet will be reviewed and posted as soon as possible

{{ newSnippetForm.errors.url[0] }}

{{ newSnippetForm.errors.categories[0] }}