How to strip testing code when React JS is minified by for production?

Question

In my React functional component, I use useEffect to do some debug logging, but I only want it when I am running in a non --production build.

// something like
if (process.env.NODE_ENV !== 'production') {
  // I want the contents of this block removed on production builds, but it is inside a function
  useEffect(() => {
    console.log("authState changed", AuthStates[authState]);
  }, [authState]);

  useEffect(() => {
    console.log("authToken changed", authToken);
    if (tokenExpiresOn) {
      console.log(
        `token expires in ${(tokenExpiresOn - Date.now()).toLocaleString()}ms`
      );
    }
  }, [authToken]);

  useEffect(() => {
    if (tokenExpiresOn) {
      console.log(
        `token expires in ${(tokenExpiresOn - Date.now()).toLocaleString()}ms`
      );
    } else {
      console.log("tokenExpiresOn cleared");
    }
  }, [tokenExpiresOn]);
}

Looks like a good use case for a custom hook

charlietfl
– charlietfl

2021-01-23 16:29:18 +00:00
Commented Jan 23, 2021 at 16:29 — charlietfl
– charlietfl, Commented Jan 23, 2021 at 16:29

Sam · Accepted Answer · 2021-01-23 16:28:02Z

1

You can not declare hooks conditionally. You can declare on the top level and you can put your business logic inside the hook, e.g below.

useEffect(() => {
   if (process.env.NODE_ENV !== 'production'){
    console.log("authToken changed", authToken);
    if (tokenExpiresOn) {
      console.log(
        `token expires in ${(tokenExpiresOn - Date.now()).toLocaleString()}ms`
      );
    }
 }
  }, [authToken]);

answered Jan 23, 2021 at 16:28

Sam

1,2591 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Archimedes Trajano Over a year ago

but does it strip it from the minified code though? Since it will never reach that path?

Sam Over a year ago

@ArchimedesTrajano, It will be part of the code, but will not execute until it matches the condition.

Archimedes Trajano Over a year ago

OK my Q is to make sure it is stripped off the minified output.

Sam Over a year ago

Take a look on this thread stackoverflow.com/questions/28572380/…

Archimedes Trajano Over a year ago

Is there a specific set of instructions on how to integrate that with a ReactJS build?

Collectives™ on Stack Overflow

How to strip testing code when React JS is minified by for production?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related