Develop Reference

Proper use of state in React

I am new to React and a bit struggling with state in React and how and where we need to use it. So far, I found out that "If modifying a piece of data does not visually change the component, that data shouldn’t go into state". So, state is all about re-rendering the UI(I hope I am correct). So, the question I want to ask is Is it true that we use state only for re-rendering the UI only?, nothing else and nothing more?

You can use state in your class components. State is like private data of your component that may change by action made by user.
State is immutable. This means you can not change state directly in following way this.state.someVal = "smth". The only way to change state is using this.setState() method.
When you change state value React automatically re-renders your component without refreshing the page. In other words React.js reacts to your changes

State is an object that is directly tied to rendering the component. The reason why you can't change State directly with say this.state.foo='bar' is that React would have no way of knowing that it needed to re-render the component if you did that. Thus there is a setState method to change the state, which under the hood calls the render function of your component.
Therefore, if you have some data that has nothing to do with rendering the component, you don't want to put it into state, as setting its value will cause unnecessary renders to occur. If you're using class components, you can just put that data on the class directly: this.foo='bar'.

Basically yes! Two examples might be: A - holding a list of items (shopping list, or todo items) that are rendered directly to the UI, that are subject to change as the user adds and removes items. B - a value that determines whether or not you want something to show up on your UI, for example, you might have a state value called 'showNavbar' that is either true or false, depending on whether you want the user to see a navigation bar.
I hope that helps make sense of it in a basic way :)

We use the state for rendering the UI.
Also, I think the State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
For this, We use the 'setState' method.
setState() is the only legitimate way to update state after the initial state setup

How to set autofocus in React?

I am trying to set the focus on my React page but it doesn't work because the component updates which I think overrides the componentDidUpdate.
is there another way to do this?
this is the code I normally use to focus
document.querySelector("#input-box").focus();

If you are using react you should ideally be using refs and using them to set focus. Check the accepted answer for Set focus on input after render
If you have a problem of the component losing focus a lot, this can happen if the key value that you set for the component is not unique. React uses the key value that you set to track components across render cycles. If the key is generated incorrectly then you can have a scenario where the component loses focus across render cycles. For e.g., a controlled input box when a user is typing in it.

React components for highlighting text and reloading highlights from files

I am working on creating a text highlighter with these functionalities:
It allows the users to select and highlight/unhighlight the text on
the page with different colors.
Load the highlights from a file (search for the words from the file in the page and highlight them).
I was able to create the highlight and delete highlight function using rangy https://github.com/timdown/rangy (which is not a react component), but whenever any component on the page sets the state using (setState method) those highlights disappear.
Also, previously highlighted items are not easily loaded into the page using this method.
That is why I am redeveloping this functionality again, and I want to know what would be the right approach to tackle this issue?
I have been thinking of developing a custom React component for highlighting and adding it to the page, but for this approach, I want to know how to dynamically add the highlights component when the user selects a text on the page without losing it when the state is updated.
A link to a useful resource on how to add dynamic components would be convenient for me as I have been searching for the correct way to tackle this issue for a while and I think I might not be heading in the right direction.

React will re-render anything where the state has changed. This will cause your highlighting to disappear as the elements are not the same even if they appear the same.
React will also intelligently not re-render if you set a unique key property in many cases. This lets React know to reuse the component.
If the state is correctly changing, and you only want to sometimes prevent a re-render, you should implement a shouldComponentUpdate lifecycle method to control the re-render conditions yourself.

React Portal Functional Component

I have a problem to render an input field with an portal.
When I change a the value of the input, it looses focus.
I think it´s because of rerendering on state change.
https://codesandbox.io/s/zk0w1jv6rp
Does anybody know a solution?
UPDATE
Is there a way that the Bar-Componet will be reused? Lets say I could add something like a key property, so that react knows that it´s the same component and can reuse it.

Its because each time HelloReact component re-render, you are defining a new Bar component and creating a new Bar component, that is not a good approach.
Simple solution is use autoFocus, so each time when it create a new Bar component, it will focus the input element.
Working code.
Better way would be to define Bar component outside of HelloReact component and pass the value and onChange event handler in props. In that case you don't need to use autoFocus.
Example.

How to avoid re-rendering react DropdownList from react-widgets

I'm using the DropdownList from react-widgetsto make a dropdown menu from a json file (lang has the values). Here is the code:
<DropdownList
ref='dropdown'
data={lang}
valueField='id'
textField={item => item.name}
caseSensitive={false}
filter='contains'
value={this.state.value}
onChange={this.handleLangChange} />
The problem is that the list is huge!!! and so rendering it takes time and when the user wants to select an item he had to wait for couple of seconds. Does anyone knows how can I make it faster?
It seems that it's rendering the DropdownListcomponent each time the search input is updated :/

Take a look at React lifecycle shouldComponentUpdate() method. It is responsible for notifying React if component should be re-rendered. You could enforce re-rendering ONLY when dropdown elements are modified.
Not sure how much access over React-Widgets you have. But you clearly can create a wrap component around DropDownList to have access to properties and shouldComponentUpdate. Just an idea