Good Practice ?

Is adding and removing a components a good practice ? I want to show one grid at a time in the screen but for various tables. Each time, I remove the existing grid and add a new? Is this OK to do ?

What you ask for is totally ok. You may also use setVisible(boolean visible). https://vaadin.com/api/platform/23.2.3/com/vaadin/flow/component/Component.html#setVisible(boolean)

Keep in mind that by removing something there is less traffic from server to client comparing to just hide something.
An example would be if you have two large grids that may be shown one at the time on same page. If you use remove, only one grid with its data will be transferred from server. If you hide, both grids will be transferred but one will be set to non visible (hidden). Hidden is only done inside the browser with CSS I believe. We as developers should always try to optimize the performance and thus user experience. Maybe the best experience is to switch between two grids without going back to the server, you must decide this compared to removing.

There is no definitive yes/no answer to this question. It really depends on many factors like what kind of data is shown in the Grids, is the data static or very dynamic, i.e. when Grid is to be reshown should its data refeshed or not. Hiding/ unhiding is fast if Grid is not being refreshed at the same time. But if Grid data is changed remove / add could be better. If Grid configuration is to be altered too, the removing old and recreating a new Grid instance is not a bad idea.