Boost Your ReactJS Development: 5 Expert Hacks You Need to Know

As a developer, I'm always looking for ways to improve my workflow and write more efficient code. Here are some lesser-known React hacks that can help you do just that:

1- Use the useReducer() hook instead of useState() for more complex state management, particularly when you have multiple related state variables that need to be updated together. Here's an example:

function reducer(state, action) 
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1, isEven: (state.count + 1) % 2 === 0 };
    case 'decrement':
      return { count: state.count - 1, isEven: (state.count - 1) % 2 === 0 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0, isEven: false });
  return (
    <div>
      <p>Count: {state.count}</p>
      <p>{state.isEven ? 'Even' : 'Odd'}</p>
      <button onClick​={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick​={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

2- Use React.forwardRef() to pass a ref to a child component from a parent component. This is particularly useful when you need to access a child component's DOM node or call one of its methods. Here's an example:

const Child = React.forwardRef((props, ref) => 
  const childRef = React.useRef();
  React.useImperativeHandle(ref, () => ({
    method() {
      childRef.current.doSomething();
    }
  }));
  return <div ref={childRef}>Child component</div>;
});

function Parent() {
  const childRef = React.useRef();
  function handleClick() {
    childRef.current.method();
  }
  return (
    <div>
      <Child ref={childRef} />
      <button onClick​={handleClick}>Call child method</button>
    </div>
  );
}

3- Use the React.lazy() and React.Suspense APIs to lazily load components and their dependencies when they're needed, improving your app's performance by reducing its initial load time. Here's an example:

const LazyComponent = React.lazy(() => import('./LazyComponent'))

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

4- Use React.memo() to memoize functional components that receive the same props, avoiding unnecessary re-renders. For example:

const MemoizedComponent = React.memo(props => 
  // your component logic here
});

5- Use the React.useDebugValue() hook to provide additional debugging information for custom hooks. This can help you identify the cause of bugs more quickly. Here's an example:

function useCustomHook() 
  const [value, setValue] = React.useState(0);
  React.useDebugValue(`Value is ${value}`);
  return [value, setValue];
}

function Component() {
  const [value, setValue] = useCustomHook();
  // your component logic here
}

I hope you find these ReactJS hacks helpful in your development work!