Detecting rather prop were passed in or set by defaultProps

Question

I would find it convenient if one of two closely related features were possible to do in React, purely for convenience/syntactic sugar since I know I can do what I want without them, it's just a little uglier/slower. I suspect neither can be done, so rather then write two separate questions that are nearly identical I'm asking about both in this question so you can crash my dreams all at once :)

I've found myself wanting a convenience feature a few times, some way of storing in props a little more knowledge about what props are set to avoid having to write as many helper methods.

To use my most recent example I have two props errorEvaluator and warningEvalutator are functions that check rather a data set should be marked with warning or error state. They both have default props which always return false if an evaluation isn't provided, so I don't have to constantly do null checks in code.

I now want to know if no warning or error evaluator was provided, if so I won't offset everything to make space for the warning/error icon that will never be used, I can't just check for the funcitons being undefined since I use defaultProps. What I'd like is one of two quickconvenience options for checking if these values weren't set by the operator. So something like:

1. some function that checks rather a prop was passed by user, as opposed to being set by default props, I could call to find out rather there was a value set.
2. Some way to do quick modification of props whenever a component updates where I can set some showIcon prop if both evaluators are undefined, then set the evaluators to my default always-false evaporators; without having to resort to lifecycle methods which somehow feel like overkill.

Do either of these, or some equivalent quick way of doing such a check exist?

The cleanest option I know works is to not use default props and instead have methods that return my evaluators, returning default evaluator if none is passed, for when I want to use an evaluator, then checking for undefined evaluator in props when I want to know if an evaluator was provided. That works, I'm just wondering if there is some quicker or cooler syntactical sugar I'm not aware of?

Answer 1

For point 1: you can't check whether a prop was passed in or set by default, as doing that would defeat the entire point of having default props. If you want to be able to tell whether a prop was passed in or not, you must not use a default prop and check for undefined.

As for point 2: Not only is there no way to do that, but you should never change props from within the component that receives them. That's just against the way that React works. A component should take its props and handle them. If some value or UI element is an "output" of a component and computed from its props, it should not be a prop of that component. If you need to detect when props change, then lifecycle methods aren't overkill, they are the right way to do that.

Answer 2

Since you know which functions are the default ones, you can check for them explicitly. You could use an equality comparison:

if(this.props.errorEvaluator === this.defaultErrorEvaluator) {
    // Set up styles to exclude formatting
}

You'd need to go slightly out of your way to ensure that you always used exactly that evaluator, and that the caller didn't get their hands on it, but that shouldn't be hard.