loading...
Cover image for 5 Canny little tricks for React devs

5 Canny little tricks for React devs

michalhonc profile image michalhonc ・2 min read

No extra talking. Let's get to it.


1. Pretty print your props.

You just created new component that has massive amount of props. To quickly get your head around them you can pretty print them on page with more arguments on native JSON.stringify function.

const NewComponent = (props) => (
   <pre>
      {JSON.stringify(props, null, 2)}
   </pre>
);

2. Solve multiple HOC around a component?

You cannot use hooks for some reason so you end up with HOC (Higher Order Components). That can get hairy in no time. Use compose function to clean your code. You can create your own or if you use redux you can import one from it.

export default connect(mapStateToProps, mapDispatchToProps)(i18n(format(Component)));

// vs.

import { compose } from 'redux'; // or your implementation

const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
   i18n,
   format
);
export default enhance(Component);

3. console.log function that uses concise body (body without return statement).

You have function component that use concise body so you immidietely return body without the need of return statement. Pretty cool time saver.. but what about the time you want to console.log props. You would have to convert it to block body with return statement. Or not? Actually you can use condtional logic for it.

const Component = (props) => console.log(props) || (
   <div>
      {props.children}
   </div>
);

This both logs props to console and render the component because console.log returns falsy value so it skips to second part of the condition.


4. Manually restart nodemon

Sometimes you want to restart nodemon server manually. Instead of some random change to a random file and Ctrl + S just type rs with a carriage return (Enter) to the terminal running nodemon. It will restart.


5. Pass HTML character references as props

Want to pass HTML character references as props in JSX? It works with simple string but breaks with more complex logic. You can achieve it with String.fromCharCode function

// <Component charCode={160} />
// 160 -> non-breaking space

const Component = (props) => {
   const divider = String.fromCharCode(props.charCode);
   return (
      <div>
         <SubComponent text={`${divider}-${divider}`} />
      </div>
   );
}

Find more tricks on my Twitter!
https://twitter.com/Michalhonc

Discussion

pic
Editor guide
 

I love that JSON.stringify() trick, so I often create a helper <Debug> component with custom styles and simply import it whenever I need it. Sometimes it's just easier than using the devtools.

 

Feeling the same. My life is incomplete with just plain <div>Hi</div> :-)

 

Nice article! 👏👏👏
Can you explain point 5 in more detail please?

 

The main premise is that JSX compiler parses HTML entities, but React does NOT. This inconsistent behavior is easy source of bugs. When you pass plain string as prop with value &copy;, it works as expected, ie. html char of copyright symbol is present. The JSX compiler parses that as expected. BUT value of {'&' + 'copy' + ';'} will result in plain string &copy;. As precaution I always use String.fromCharCode so I don't have to think if React parses it or it's on JSX compiler.

const copySymbol = '&copy;';
<Button symbol={copySymbol} /> // results in '&copy;'

<Button symbol={'&' + 'copy' + ';'} /> // results in '&copy;'

<Button symbol="&copy;" /> // results in '©'

<Button symbol={String.fromCharCode(169)} /> // results in '©'

const copySymbolFromCharCode = String.fromCharCode(169)
<Button symbol={copySymbolFromCharCode} /> // results in '©'
 

These are really handy. Thank you for sharing!

 

Welcome! Sure will post more in future