5 Canny little tricks for React devs

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