Comment by Sebastian on "Default disabled button click event is not firing on reactjs"

I think you tried to swim against the stream. You tried to manipulate things directly which isn't optimal and can lead to side effects.

I use React with some rules in mind because the way React works.

Never use arrrow functions in render. Everytime render occours a new function is created and therefor react things has changed and render although nothing has changed. This lead to a performance issue on larger scale.
There are 2 things you can rely on that triggers a render to update your JSX/HTML: props and state.

The order is:

render call things at a point of time depending on information in props and state.
events like a button click, with changes the local state
or props got changed from outside the component (parent)
that change lead to a new render call to apply the changes

and the cycle restarts.

I've altered your code on how I would code your component. Have a look.

codesandbox.io/s/l71w795xnq

Any Questions or feedback is appreciated

Thanks for the answer. I know that we achieve with the state. But i what to know why its happening with ref. Using the ref i can change the textbox value and it will reflect on the component. But what's the problem with button even it enabled.

I Updated my sandbox with a Hello2 Component where I use the new createRef syntax (introduced in react 16.3) instead of state and you are right, it isn't working as expected.

Despite I wouldn't use refs for especially this situation, I'd may open an issue on the react github page to clarify if its a bug or expected behavior. The React devs are nice and helpful people.

I filed an issue. @sivabalan02 Please comment if you can add some info to it.

github.com/facebook/react/issues/12704

Thanks. Can you tell me in which kind of events we have to go to the ref?

Do you mean for which cases refs are recommended?

Well the Docs Page of React take a clear spin on that.

reactjs.org/docs/refs-and-the-dom.html

'Avoid using refs for anything that can be done declaratively'

means something like set a focus to a textbox you can use refs. for something like disabling/enabling a button, which can be done declarativly via properties, you should go for this.

Yes i mean the recommended use cases for refs. Here declarative means they are pointing the input attributes not the events ? If i am right means, i am doing the enable/disable through the ref only which you're telling not to do so. Sorry for asking stupid questions, but i am confused

In short terms you can say: Every DOM attribute on objects can be set declaratively so there I wouldn't use refs. Everything else (like calling methods on DOM objects like inputs) can make use of it.

Sebastian Encountered the same issue 3 years later and fixed it by using useState. Thanks :)

Search Hashnode