Q:

Detect whether input element is focused within ReactJS

How can I detect whether an input element such as the following is currently focused within a ReactJS render function?
<input type="text" style={searchBoxStyle} placeholder="Search"></input>   

A:

You can run something like this anytime as long as the input node is mounted and there is a reference to it:
const ReactDOM = require('react-dom')

if ( document.activeElement === ReactDOM.findDOMNode(this.refs.searchInput) )

You will have to add a reference to the input element:
<input ref="searchInput" ...

You should not do this in the render method though, because the input node might not be mounted yet. Use a lifecycle method like componentDidUpdate or componentDidMount.
Another way would be to add event listeners for the focus and blur events inside the input field:
<input type="text" onFocus={this.onFocus} onBlur={this.onBlur}...

Then set states in the handlers and check that state in the render method.
onBlur: function() {
    this.setState({ focused: false })
},
onFocus: function() {
    this.setState({ focused: true })
},
render: function() {
    if ( this.state.focused ) {
        // do something
    }
    <input onFocus={this.onFocus} onBlur={this.onBlur}...
}

Note that this will call a re-render each time the node is focused or blurred (but this is what you want, right?)

A:

I started with the answer given by David, where he describes two methods, and they both worked for me, but I had concerns about both:

On the first case it uses findDOMNode, what has some disadvantages: at minimum its use is discouraged, and it can easily be implemented in a way that it is considered an anti-pattern; and also it can make the code slower, by bypassing the virtual DOM and working with the DOM directly.

On the second option, create and manage a component state only to find that answer seems too much work, can easily get out of sync, and can cause the component to re-render unnecessarily.

So after trying to explore the issue more, I came up with the following solution:
if (this.props.id === document.activeElement.id) {
  // your code goes here
}

The same comment on David's answer applies:

You should not do this in the render method though, because the input node might not be mounted yet. Use a lifecycle method like componentDidUpdate or componentDidMount.

Advantages:

uses the current component properties (which are immutable values)
doesn't require state management, and therefore won't cause unnecessary re-rendering
doesn't require DOM traversing, so performance should be as good as it gets
doesn't require creating a component reference

Requirements:

your component should have an id property that is passed to the form element you want to check (which is most likely the case anyway)

